Canvas for Beginners
The Canvas is the immediate mode drawing surface you have in HTML for bringing pixels to life using JavaScript. If none of what I just wrote makes sense, then the content here is just what you need :P
The Topics:
- DOM vs. Canvas
- Getting Started with the Canvas
- Drawing Basics / Lines
- Drawing Curves
- Drawing Multiple Things
- Drawing Rectangles (and Squares)
- Drawing Triangles
- Drawing Circles
- Modifying How Your Corners Look
- Working with Colors
- Drawing Text
- Drawing Images
- Canvas Transformations
- A Deeper Look at Equilateral Triangles
- From Pixels to Objects
- Animating with requestAnimationFrame
- Creating Animations on the Canvas
- Animating Many Things on the Canvas
- Creating Motion Trails
- Creating Sprite Animations
- Working With the Mouse
- Follow the Mouse Cursor
- Mouse Follow with Ease
- Working With the Keyboard
- Moving Shapes Using the Keyboard
- Resizing the HTML Canvas Element
- Ensuring our Canvas Visuals Look Good on Retina/High-DPI Screens
