Learn HTML Canvas - Pixels, Particles & Physics (Udemy.com)
From creative coding basics to advanced algorithmic art
Created by: Frank Dvorak
Last updated November 2023
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
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!
Instructor Details
- 4.8 Rating
63 Reviews
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.
More courses by Frank Dvorak
Build Animated Physics Game with JavaScript (2024)
4.7 (72 Reviews)
Provider: Udemy
Time: 4.6h
$59.99
More Web Development courses
Python Fullstack Mastery: Build Modern Web Apps with Django (2025)
5.0 (165 Reviews)
Provider: Udemy
Time: 35h
$19.99
NgRx Signal store for Angular - The missing guide (2026)
4.9 (436 Reviews)
Provider: Udemy
Time: 11.3h
$89.99
Vue 3: Create a Mobile & Desktop App (with Quasar 2 & Pinia) (2024)
4.9 (177 Reviews)
Provider: Udemy
Time: 7.6h
$79.99
Build a URL Shortener App with ASP.NET: Step by Step (2026)
4.9 (100 Reviews)
Provider: Udemy
Time: 9.6h
$10.99
The Complete Elixir and Phoenix Bootcamp (2021)
4.8 (7,773 Reviews)
Provider: Udemy
Time: 17.4h
$84.99
Reviews
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.
Quality Score
No CourseDuck member has rated this course yet. Taken it? Give each part a thumbs up or down.
Overall Score : 96 / 100








