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

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... See More

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

Hide All

Hide All Lessons

1. DOM vs. Canvas

DOM vs. Canvas

When to Use Which?

Summary

Further Reading

2. Getting Started with the Canvas

Getting Started with the Canvas

Meet the Canvas Element

Drawing Things

Conclusion

3. Drawing Basics / Lines

Canvas Drawing Basics

How Drawing in the Real World Works

Drawing in the Canvas World

Conclusion

4. Drawing Curves

Drawing Beziér Curves on the Canvas

Drawing a Quadratic Beziér Curve

Drawing a Cubic Beziér Curve

Conclusion

5. Drawing Multiple Things

Drawing Multiple Things

This Seems Simple, No?

Creating an Individual Shape

Draw Order Matters

Conclusion

6. Drawing Rectangles (and Squares)

Drawing Rectangles (and Squares) on the Canvas

Drawing Rectangles

Conclusion

7. Drawing Triangles

Drawing Triangles on the Canvas

Drawing Triangles

Conclusion

8. Drawing Circles

Drawing Circles on a Canvas

Meet the Arc Function

Displaying the Circle

Conclusion

9. Modifying How Your Corners Look

Modifying How Corners Look

Meet the lineJoin Property

Conclusion

10. Working with Colors

Working with Colors

Colors, strokeStyle, and fillStyle!

Specifying Gradients

Conclusion

11. Drawing Text

Drawing Text on the Canvas

From Text to Pixels

Conclusion

12. Drawing Images

Drawing Images on the Canvas

Images and drawImage()

Displaying an Image

Scaling the Image

Slicing an Image

Conclusion

13. Canvas Transformations

Canvas Transformations

Meet the Transformation Methods

Undoing Transforms

Conclusion

14. Structuring Your Drawing Code

Structuring your Drawing Code

Using Functions

Using Objects

Conclusion

15. Animating with requestAnimationFrame

Animating with requestAnimationFrame

Meet requestAnimationFrame

Using This Magical Function

Simple Example

Your Frame Rate

Stopping Your Animation Loop

The Timestamp Argument

Conclusion

16. Creating Animations on the Canvas

Creating Animations on the Canvas

Animation 101

Animating on the Canvas

Implementation Time

Conclusion

17. Animating Many Things on the Canvas

Animating Many Things on a Canvas

Deconstructing the Example

Conclusion

18. Creating Motion Trails

Creating Motion Trails

The Basic Approach

Creating the Motion Trail

Conclusion

19. Creating Sprite Animations

Creating Sprite Animations on the Canvas

The Sprite Sheet

How All of This Works

It's Coding Time!

Conclusion

20. Working With the Mouse

Working with the Mouse

The Mouse and the Canvas

Getting the Exact Mouse Position

Conclusion

21. Follow the Mouse Cursor

Follow the Mouse Cursor

The Basic Approach

Conclusion

22. Mouse Follow with Ease

Mouse Follow with Ease

Here's the Code

Conclusion

23. Working With the Keyboard

Working With the Keyboard

Meet the Keyboard Events

Using These Events

The Keyboard Event Properties

Some Examples

Conclusion

24. Moving Shapes Using the Keyboard

Moving Shapes on the Canvas Using the Keyboard

The Basic Approach

Displaying Our Triangle

Dealing With the Keyboard

Adjusting the Position

Preventing Default Keyboard Behavior

Improved Keyhandling Logic

Conclusion

25. Resizing the HTML Canvas Element

Resizing the HTML Canvas Element

Why CSS Doesn't Work

Properly Resizing your Canvas

Why the Weird Behavior?

Conclusion

26. Detect Whether a Font is Installed

Detect Whether a Font is Installed

Grab the Code

Overview of the Code

Conclusion