HTML5 Canvas Tutorials

by Patrick Horgan

(Back to web tutorials)

Will this thing really replace flash?

That's what got me looking at the new HTML5 canvas element. What can you do with it? Here I'll share my explorations with you.

Basic Introduction to Canvas

This will give you enough information to start using a canvas.

How do you use context.arcTo()?

This is the most misunderstood of the methods to create subpaths. I promise that after this tutorial you'll understand it forever.

Getting Key Events With Canvas

Like a lot of other people, when I first tried to receive key events in a canvas element (in my case a custom slider on a canvas), they didn't work. Here I explain why and show the fix.

Canvas Event Delegation

When you're using a canvas, you might want user interface elements on the canvas and you might want them to be able to receive events.

Drawing lines and arcs with arrow heads

When drawing diagrams, you often want to draw lines and arc with arrow heads. In this tutorial we develop ways to do it and along the way use most of the drawing commands of the canvas.

Using gradients with canvas

Gradients can do some pretty obvious pretty things, but their real power comes from more subtle uses.

Using Canvas to make squares of color or to scale images

You can use an html5 canvas as a temporary location to build an image. Once you have like you like it, then you can get the data for the image back as a dataurl and use it to make a new image. We show you how by illustrating two uses of this idea. We show you have to make a possibly bordered rectangular image of a particular color, and we also show you how to take an existing image and scale it to another size using a canvas.

The Game of Life

This application shows examples of using events and drawing buttons and other widgets. You're on your own, though, you have to read the source to figure out how I did it. All the parts are well documented in other tutorials.

(Back to web tutorials)