CF

Learn HTML Canvas - Pixels, Particles & Physics

2h 15m 38s
English
Paid

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.

About the Author: Udemy

Udemy thumbnail

Udemy is the largest open marketplace for online courses on the internet. Founded in 2010 by Eren Bali, Oktay Caglar, and Gagan Biyani and headquartered in San Francisco, the company went public on the Nasdaq in 2021 under the ticker UDMY. The platform hosts well over two hundred thousand courses across software development, IT and cloud, data science, design, business, marketing, and creative skills, taught by tens of thousands of independent instructors. Roughly seventy million learners use it worldwide, and the corporate arm — Udemy Business — supplies a curated subset of that catalog to enterprise customers.

Because Udemy is a marketplace rather than a single editorial publisher, the catalog is uneven by design. The strongest material lives in the long-form, project-based courses authored by working engineers — full-stack JavaScript, React, Node.js, Python data science, AWS, Docker and Kubernetes, mobile development with Flutter and React Native, and cloud certification preparation. The CourseFlix listing under this source is the slice of that catalog that has been mirrored here for offline-friendly viewing, organized by topic and updated as new releases land. Pricing on Udemy itself swings dramatically with the site's near-permanent sales, which is why the platform is best treated as a deep reference catalog: pick instructors with strong reviews and a track record of updating their material rather than buying on the headline price alone.

Watch Online 35 lessons

This is a demo lesson (10:00 remaining)

You can watch up to 10 minutes for free. Subscribe to unlock all 35 lessons in this course and access 10,000+ hours of premium content across all courses.

View Pricing
0:00
/
#1: Introduction
All Course Lessons (35)
#Lesson TitleDurationAccess
1
Introduction Demo
00:58
2
Control and animate images with code
01:01
3
HTML, CSS & JavaScript setup
02:42
4
How to organise anything into a grid
06:33
5
How to draw, crop & slice images with code
03:45
6
How to animate images with code
01:56
7
Mouse interactivity
02:00
8
How to find the distance between 2 points
03:08
9
Getting direction from point A to point B
04:59
10
Motion physics formula (friction & easing)
05:57
11
Moving the cells around
02:38
12
Performance optimizations
02:01
13
Creative coding experiments
04:33
14
Project setup
02:38
15
Converting images to code
04:26
16
How to use canvas
03:00
17
JavaScript classes and particle systems
03:22
18
Drawing rectangles
01:26
19
Drawing images
01:25
20
Drawing particle objects
02:27
21
Effect class
04:36
22
Code clean-up
01:08
23
Multiple randomized particles
04:15
24
Draw image method
00:43
25
How to center images in canvas
02:04
26
Particle motion
05:21
27
Pixel analysis
06:10
28
Coordinates and colors from pixel data
10:05
29
Turning images into particle systems
04:53
30
Animated particle transitions
02:58
31
Animation on button click
03:58
32
Mouse interactions and particle physics
11:31
33
Creating unique animated transitions
05:57
34
Particle assemble effect
09:10
35
Particle print effect
01:54
Unlock unlimited learning

Get instant access to all 34 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.

Learn more about subscription

Related courses

Frequently asked questions

What prerequisites are needed before taking this course?
The course does not require any prior experience with HTML canvas or advanced JavaScript libraries. However, a basic understanding of HTML, CSS, and JavaScript is recommended to follow along with the course material effectively. The course will guide you through the setup process and help you organize your code, which will be beneficial if you have a foundational knowledge of these technologies.
What projects will I build in this course?
Throughout the course, you will work on various projects that involve drawing and animating visuals on HTML canvas using vanilla JavaScript. These include creating grids, animating images, implementing mouse interactivity, and developing particle systems. The course also covers the creation of unique animated transitions and particle effects, providing a hands-on experience in creative coding.
Who is the target audience for this course?
This course is designed for individuals interested in front-end web development and creative coding. It is suitable for beginners who have basic knowledge of HTML, CSS, and JavaScript, as well as for more experienced developers looking to expand their skills in using the HTML canvas for graphics and animation.
Does the course cover how to use any specific frameworks or libraries?
The course focuses exclusively on using vanilla JavaScript without the reliance on frameworks or libraries. This approach helps you understand the fundamental principles and techniques of drawing and animating on the HTML canvas, providing a deeper understanding of how these processes work at a fundamental level.
What topics are not covered in this course?
The course does not cover the use of external JavaScript frameworks or libraries for canvas manipulation. It also does not delve into server-side programming or the use of canvas in conjunction with backend technologies. The focus is strictly on client-side graphics and animation using the HTML canvas element with vanilla JavaScript.
How much time should I expect to commit to this course?
With a total of 35 lessons, the course requires a commitment to complete all the lessons and practice the exercises. While the exact runtime is not specified, students can expect to spend additional time experimenting with the creative coding exercises and projects to fully grasp the concepts taught.
How can the skills learned in this course benefit my career?
The skills acquired in this course can enhance your ability to develop interactive and visually appealing web applications. Understanding how to manipulate the HTML canvas with vanilla JavaScript is valuable for any front-end developer. These skills can be applied to create dynamic visuals, animations, and creative coding projects, making your portfolio stand out in the competitive field of web development.