HTML5 canvas allows scripts to dynamically render 2D bitmap images. In addition to basic shapes, canvas can be used to build graphs, animations, games, and image composition.
Here is a list of tools and tutorials for HTML5 canvas. There are basic tutorials and resources to get started. There are multi-part guides to learn advanced canvas functionality. And there are experiments and examples to discover further aspects of canvas.
Canvas Tutorial. This tutorial describes the basics of how to implement the canvas element in your HTML pages. The examples provided should give you some clear ideas what you can do with canvas.
HTML5 canvas – the basics. Here is another tutorial that takes you through the canvas basics, implementing a 2D canvas context, and using the basic canvas functions, including lines, shape primitives, images, text, and more.
WHATWG – The Canvas Element Specifications. The canvas element is part of the Web Hypertext Application Technology Work Group (WHATWG) Web applications 1.0 specification, also known as HTML5.
W3C – HTML Canvas 2 D Context Working Draft. This is the working draft specification for canvas by the World Wide Web Consortium (W3C).
Additional Tutorials and Resources
31 Days of Canvas Tutorials. This series of 31 tutorials is a great foundation into visual coding with HTML5 canvas.
Drawing Basic Shapes with HTML5 Canvas. This tutorial is a demonstration of how to draw basic rectangles and arcs with canvas.
Working with Arcs and Curves in HTML5 Canvas. Arcs and curves in canvas can be combined to form all sorts of shapes. This tutorial describes how to draw arcs, quadratic Beziér curves, and cubic Beziér curves.
How to Draw with HTML5 Canvas. This tutorial looks at a few examples to get an idea of the variety canvas application and presents additional resources and examples.
An HTML5 Slideshow w/ Canvas & jQuery. This tutorial uses canvas to make a progressively enhanced slideshow with a fancy transitioning effect.
HTML5 Canvas Element Guide. This tutorial will help you understand the canvas element and what kinds of things are required and expected in its associated code.
HTML 5 Canvas Deep Dive. This session is a three-hour workshop that dives deep dive into canvas, starting with the basics and progressing into real world applications. Finally it takes a look at some experimental edges of canvas, such as webcam and audio visualization.
HTML5 Canvas Advanced Tutorials Introduction. Part two of a canvas series, this tutorial explores composites, transformations, image data and URLs, animations, and mouse detection.
21 Ridiculously Impressive HTML5 Canvas Experiments. Here is a collection of some impressive HTML5 canvas-based experiments. Take a peek at some of the cutting edge examples.