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

Ready to put these ideas to work? Our Canvas quizzes focus on choosing an approach and spotting mistakes in drawing, animation, and interaction.

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
Drawing a Perfect Grid on the Canvas
Creating a Fullscreen Grid
Drawing Sharp Lines on the Canvas

The KIRUPA Newsletter

Thought provoking content that lives at the intersection of design 🎨, development 🤖, and business 💰 - delivered weekly to over a bazillion subscribers!

SUBSCRIBE NOW

Canvas for Beginners

The Topics:

The KIRUPA Newsletter

Follow:

Popular

Loose Ends