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

Estimated completion time: 9h
Certificate Included
113 Lessons
62 Playgrounds
107 Illustrations

Join 450,000 learners, working at companies such as:

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 canva... See more

Course Contents

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

How You'll Learn

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.

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.

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.