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

YouTube

HTML5 Canvas API Crash Course

Traversy Media via YouTube

Overview

Learn to harness the power of the HTML5 Canvas element and JavaScript API in this comprehensive 54-minute crash course. Dive into drawing shapes, creating paths, and implementing basic animations. Master essential techniques such as creating rectangles, arcs, and circles, while exploring advanced concepts like collision detection. Build a practical Breakout game project to reinforce your skills. Gain hands-on experience with canvas context manipulation, image drawing, and event handling. By the end of this tutorial, you'll have a solid foundation in Canvas API, enabling you to create dynamic, interactive graphics for your web applications.

Syllabus

Intro
Canvas Context
FillRect
StrokeRect
Paths
Arc
Animation
Draw Circle
Update Canvas
Collision Detection
Breakout Game
Player
Draw Image
Update Animation
Event Listener
Detect Walls

Taught by

Traversy Media

Reviews

Start your review of HTML5 Canvas API Crash Course

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.