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.
This will give you enough information to start using a canvas.
This is the most misunderstood of the methods to create subpaths. I promise that after this tutorial you'll understand it forever.
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.
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.
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.
Gradients can do some pretty obvious pretty things, but their real power comes from more subtle uses.
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.
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.