You can find tutorials on using the HTML5 canvas and JavaScript for creating shapes, animation, and game development right here. Learning how to work with the HTML5 canvas is a great idea if you are thinking of developing web-based games, animations or rich interactive web-based applications. When you see a word in a tutorial that is underlined with a dotted line you can click or tap on it for a definition of that word in the glossary.

Select one of the tutorials below to get started!

  1. Using the HTML5 canvas tag to draw shapes
  2. Drawing lines using the HTML5 canvas element
  3. Styling lines on the canvas
  4. Joining lines on the canvas
  5. Drawing paths on the canvas
  6. Clipping shapes on the canvas
  7. Drawing arcs and circles on the canvas
  8. Using the arcTo method to draw arcs
  9. Drawing quadratic curves
  10. Creating colour gradients to fill shapes
  11. Simple animations using JavaScript
  12. Animating (moving) an image using JavaScript