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

Working with the Mouse

Explore how to work with the mouse on the HTML5 Canvas to enable interactive features like drawing and moving objects. Understand basic mouse mechanics essential for building dynamic and responsive web graphics using JavaScript.

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

Working with the Mouse