Canvas tutorial - Web APIs | MDN

Before you start

Using the <canvas> element is not very difficult, but you do need a basic understanding of HTML and JavaScript. The <canvas> element is not supported in some older browsers, but is supported in recent versions of all major browsers. The default size of the canvas is 300 pixels × 150 pixels (width × height). But custom sizes can be defined using the HTML height and width property. In order to draw graphics on the canvas we use a JavaScript context object, which creates graphics on the fly.

In this tutorial

  1. Basic usage
  2. Drawing shapes
  3. Applying styles and colors
  4. Drawing text
  5. Using images
  6. Transformations
  7. Compositing and clipping
  8. Basic animations
  9. Advanced animations
  10. Pixel manipulation
  11. Optimizing the canvas
  12. Finale

See also

Help improve MDN

Learn how to contribute

This page was last modified on by MDN contributors.