Skip to content
UdemyWeb DevelopmentPaid courseIntermediate levelCertificate

Learn HTML Canvas - Pixels, Particles & Physics (Udemy.com)

From creative coding basics to advanced algorithmic art

Created by: Frank Dvorak

Last updated November 2023

icon
What you will learn

  • Draw shapes and images
  • Create particle systems
  • Learn web animation with vanilla JavaScript
  • Create animated generative art with code

How it compares

Against the other 815 rated Udemy courses in Web Development on CourseDuck:

  • Rating4.8 out of 5higher than 94% of them
  • Reviews63#728 of 816 by number of reviews
  • Length2.2 hoursshorter than 85% of them
  • Last updatedNovember 2023earlier than 65% of them

icon
Course Description

Learn the fundamentals of HTML canvas and discover how to develop, draw, and animate visuals and images with vanilla JavaScript. No frameworks and no libraries. I will explain all principles and techniques as we write our code line by line.


The HTML canvas element is used to draw graphics on a web page. We can use it as an art board and draw lines, rectangles, circles, images, curves. Today we will go deep on rectangles and images, let me show you how far we can take it. Let's dive deep into creative coding and explore the possibilities of modern front end web development.


We will start by drawing a simple rectangle and image on canvas. We will learn how to turn these basic rectangles into a particle system and we will teach these particles how to take shape and colours of any image.


Let's turn images into interactive animated pixels with physics (friction, easing). Let's make those pixels react to mouse. We will also learn how to break the images apart into individual pixels and make them automatically reassemble in 4 unique different ways.


Discover the secrets of creative coding with me. From simple shapes to advanced algorithmic art in a single class. Have fun!

icon
Udemy Discount

The discount is applied through our link. Open the course from here and Udemy's current promotional price is applied at checkout on most courses, no code to type.

Some courses are excluded from Udemy's promotions. If the price does not drop, clear your browser cookies and use the button again.

icon
Instructor Details

Frank Dvorak

Hi, I'm Frank! I'm a front end web developer, owner of Frank's laboratory YouTube channel, that specializes in creative coding with vanilla JavaScript and HTML canvas. Let's make some art, games and visual projects and learn about HTML, CSS, JavaScript and front-end web development!

In my courses IĀ use only plain vanilla JavaScript, no frameworks and no libraries. When you have deep understanding of JavaScript the programming language, picking up any library is easy.

icon
More courses by Frank Dvorak

$79.99

$59.99

icon
More Web Development courses

$19.99

$89.99

$89.99

$79.99

$10.99

$84.99

icon
Reviews

4.8

63 ratings on Udemy

Select a bar to show only those reviews.Select the bar again to show every rating.

By John B. on 6/21/2026

Fun effects but extremely math intensive. The instructor does make a good effort to explain things, but when he said the first part is "beginner friendly," I stopped there. I can also assume the latter part of the class must be geared for math geniuses.

By Marcus Martin on 12/31/2024

Excellent content, well explained. Interesting for all aspiring and experienced game and graphics developers.

By Valentina Horbatiuk on 12/6/2024

Awesome course. I really like how author explain material with great details.

By Jeetesh Bhoria on 12/5/2024

Very nice and cool effects done on images. Instructor also educate on how these effects can be improved/ changed and also what is happening behind the scenes. Thank you for this course.

By Tyson Zwicker on 9/13/2024

Section 2 should be considered a "Demo" with code of what you can do- but it goes fast and doesn't explain much. Section 3 pays it all out- the pace slows down, everything gets explained from section 2, and then gets into the useful details.

By LDSPhoenix on 9/1/2024

A very informative and enjoyable course. A little challenging in places for beginners, especially concerning the particle physics code. But a very satisfying and well-presented introductory course into some fascinating graphical effects.

By Eba Mengistu Baisa on 12/3/2022

Great course keep it up God bless you.

By David H on 10/26/2022

Enjoyed the course, and found most lessons easy to follow. Some of the later lessons required more thought, but regardless I thoroughly enjoyed it and watched all lessons in one day.

By Jesus Becerra on 10/4/2022

Frank is very knowledgeable and explains concepts very clearly. If you want to level up your Javascript skills, take this course.

By Javi Fontalva on 9/30/2022

This is a very interesting course. Not only are you going to learn about OPP, Arrow functions and so on, you will also have fun while learning. He explains everything so beginner-friendly that I could finally understand so concept of programming that I couldn't simply get with other courses. Practical but without forgetting the theory behind the exercises.

Showing all 10 reviews on CourseDuck

Read all 63 reviews on Udemy

icon
Quality Score

No CourseDuck member has rated this course yet. Taken it? Give each part a thumbs up or down.

Content Quality
/
Video Quality
/
Qualified Instructor
/
Course Pace
/
Course Depth & Coverage
/

Overall Score : 96 / 100