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

Your Frame Rate

Explore how frame rate affects animation smoothness in HTML5 Canvas using requestAnimationFrame. Understand why 60 FPS is ideal, how your device limits this rate, and learn methods to control animation speed by throttling frame updates.

We'll cover the following...

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

Your Frame Rate