Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

YouTube

HTML5 Canvas Tutorials for Beginners - Become a Canvas Pro

Chris Courses via YouTube

Overview

Coursera Flash Sale
40% Off Coursera Plus for 3 Months!
Grab it
Learn HTML5 Canvas development through this comprehensive tutorial series that progresses from fundamental concepts to advanced game creation and generative art techniques. Master canvas basics including drawing, animation, and user interaction before advancing to physics simulations with gravity effects, collision detection systems, and circular motion patterns. Explore creative coding concepts such as sine waves, Perlin noise applications, realistic fireworks animations, particle systems, and flow fields. Build complete games including classic arcade recreations like Space Invaders, Pacman, Pong, and original projects featuring Mario-style platformers, Pokémon-inspired adventures, fighting games, and tower defense mechanics. Develop skills in JavaScript programming, canvas rendering optimization, game physics, particle effects, and interactive design patterns while creating visually stunning projects that demonstrate both technical proficiency and artistic creativity in web-based graphics programming.

Syllabus

HTML5 Canvas Tutorial for Complete Beginners
Drawing On HTML5 Canvas for Complete Beginners
Animating HTML5 Canvas for Complete Beginners
Interacting with HTML5 Canvas for Complete Beginners
How to Code: Gravity
How to Code: Collision Detection
How to Code: Collision Detection Part II
How to Code: Rectangular Collision Detection with JavaScript
How to Code: Circular Motion
How to Code: Sine Waves
How to Code: One Snakey Boi with Perlin Noise
How to Code: Realistic Canvas Fireworks
How to Code: Mace Windu's Lightsaber but With Like 10 Other Colors
How to Code: Tron-Like Particle Tunnels
How to Code: Galactic Light Trails
HTML5 Canvas and JavaScript Game Tutorial
The Beauty of Code: Flow Fields
The Beauty of Code: Super Mario
Mario Game Tutorial with JavaScript and HTML Canvas
Space Invaders Game Tutorial with JavaScript and HTML Canvas
Pacman Game Tutorial with JavaScript and HTML5 Canvas
Pokémon JavaScript Game Tutorial with HTML Canvas
JavaScript Fighting Game Tutorial with HTML Canvas
Tower Defense Game Tutorial with JavaScript & HTML Canvas
ASMR Pong Programming in the Park

Taught by

Chris Courses

Reviews

Start your review of HTML5 Canvas Tutorials for Beginners - Become a Canvas Pro

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Someone learning on their laptop while sitting on the floor.