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

How Drawing in the Real World Works

Explore how traditional drawing methods with pencil translate to the HTML5 Canvas environment. Learn to draw shapes and lines on the canvas by understanding the basic steps of sketching, enabling you to start creating graphics with JavaScript confidently.

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

How Drawing in the Real World Works