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

Conclusion

Explore techniques for drawing quadratic and cubic Beziér curves on the HTML5 Canvas. Understand challenges of visualizing these curves during coding and discover helpful tools such as Mathlets that provide immediate visual feedback to simplify editing and improve precision.

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

Conclusion