HTML5 Canvas: From Noob to Ninja - an interactive deep dive
Beginner
113 Lessons
9h
Certificate of Completion
Course Overview
Kirupa is an MIT grad who works at Microsoft as Senior Program Manager. He has been tinkering with web technologies since 1998. He works on the Edge browser team where he gets to sink his teeth into the cutting-edge web technologies. HTML5 is taking over the browsers and one of the coolest things in HTML5 is the canvas - the immediate mode drawing surface you have in HTML for bringing pixels to life using JavaScript. It is used to create games, graphs, and animations. This is an extensive course with inte...Show More
Course Content
DOM vs. Canvas
Getting Started with the Canvas
Drawing Basics / Lines
Drawing Curves
Drawing Multiple Things
Drawing Rectangles (and Squares)
3 Lessons
Drawing Triangles
3 Lessons
Drawing Circles
4 Lessons
Modifying How Your Corners Look
3 Lessons
Working with Colors
4 Lessons
Drawing Text
3 Lessons
Drawing Images
6 Lessons
Canvas Transformations
4 Lessons
Structuring Your Drawing Code
4 Lessons
Animating with requestAnimationFrame
8 Lessons
Creating Animations on the Canvas
5 Lessons
Animating Many Things on the Canvas
3 Lessons
Creating Motion Trails
4 Lessons
Creating Sprite Animations
5 Lessons
Working With the Mouse
4 Lessons
Follow the Mouse Cursor
3 Lessons
Mouse Follow with Ease
3 Lessons
Working With the Keyboard
6 Lessons
Moving Shapes Using the Keyboard
8 Lessons
Resizing the HTML Canvas Element
5 Lessons
Detect Whether a Font is Installed
4 Lessons
How You'll Learn
You don’t get better at swimming by watching others. Coding is no different. Practice as you learn with live code environments inside your browser.
Videos are holding you back. Educative‘s interactive, text-based lessons accelerate learning — no setup, downloads, or alt-tabbing required.
Learn faster and smarter with adaptive AI tools embedded in every Educative course.
Built-in assessments let you test your skills. Completion certificates let you show them off.