Year-End Discount: 10% OFF 1-year and 20% OFF 2-year subscriptions!

HTML5 Canvas: From Noob to Ninja - an interactive deep dive

113 Lessons
62 Playgrounds
109 Illustrations

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 co...

How You'll Learn

Hands-on coding environments

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.

Faster than videos

Videos are holding you back. The average video tutorial is spoken at 150 words per minute, while you can read at 250. That‘s why our courses are text-based.

No set-up required

Start learning immediately instead of fiddling with SDKs and IDEs. It‘s all on the cloud.

Progress you can show

Built in assessments let you test your skills. Completion certificates let you show them off.

Hands-on coding environments

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.

Faster than videos

Videos are holding you back. The average video tutorial is spoken at 150 words per minute, while you can read at 250. That‘s why our courses are text-based.

No set-up required

Start learning immediately instead of fiddling with SDKs and IDEs. It‘s all on the cloud.

Progress you can show

Built in assessments let you test your skills. Completion certificates let you show them off.

Course Contents

1. DOM vs. Canvas
2. Getting Started with the Canvas
3. Drawing Basics / Lines
4. Drawing Curves
5. Drawing Multiple Things
6. Drawing Rectangles (and Squares)
7. Drawing Triangles
8. Drawing Circles
9. Modifying How Your Corners Look
10. Working with Colors
11. Drawing Text
12. Drawing Images
13. Canvas Transformations
14. Structuring Your Drawing Code
15. Animating with requestAnimationFrame
16. Creating Animations on the Canvas
17. Animating Many Things on the Canvas
18. Creating Motion Trails
19. Creating Sprite Animations
20. Working With the Mouse
21. Follow the Mouse Cursor
22. Mouse Follow with Ease
23. Working With the Keyboard
24. Moving Shapes Using the Keyboard
25. Resizing the HTML Canvas Element
26. Detect Whether a Font is Installed

Join more than 1.4 million learners from companies like

What our learners are saying

What our learners are saying

COURSE BY:

Kirupa Chinnathambi

Teams of every size choose
Educative for Business
to train, upskill & onboard their developers