HTML5 Canvas

You can find tutorials on using the HTML5 canvas and JavaScript for creating shapes, animation, and game development here. 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.

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 New!
  11. Simple animations using JavaScript
  12. Animating (moving) an image using JavaScript

Learn to code today!