Canvas Tutorial - Web APIs | MDN

• Skip to main content
• Skip to search
• Skip to select language

1. References
2. Web APIs
3. Canvas API
4. Canvas tutorial

Article Actions

• English (US)
  • Remember language
  • Deutsch
  • Español
  • Français
  • 日本語
  • 한국어
  • Português (do Brasil)
  • Русский
  • 中文 (简体)
  • 正體中文 (繁體)

• Before you start
• In this tutorial
• See also
• A note to contributors

1. Canvas API
2. Guides
   1. Manipulating video using canvas
3. Tutorial
   1. Canvas tutorial
   2. Basic usage of canvas
   3. Drawing shapes with canvas
   4. Applying styles and colors
   5. Drawing text
   6. Using images
   7. Transformations
   8. Compositing and clipping
   9. Basic animations
   10. Advanced animations
   11. Pixel manipulation with canvas
   12. Optimizing canvas
   13. Finale
4. Interfaces
   1. CanvasGradient
   2. CanvasPattern
   3. CanvasRenderingContext2D
   4. HTMLCanvasElement
   5. ImageBitmap
   6. ImageBitmapRenderingContext
   7. ImageData
   8. OffscreenCanvas
   9. OffscreenCanvasRenderingContext2D
   10. Path2D
   11. TextMetrics
5. Methods
   1. Window.createImageBitmap()
   2. WorkerGlobalScope.createImageBitmap()

• Before you start
• In this tutorial
• See also
• A note to contributors

This tutorial describes how to use the <canvas> element to draw 2D graphics, starting with the basics. The examples provided should give you some clear ideas about what you can do with canvas, and will provide code snippets that may get you started in building your own content.

<canvas> is an HTML element which can be used to draw graphics via scripting (usually JavaScript). This can, for instance, be used to draw graphs, combine photos, or create simple animations.

First introduced in WebKit by Apple for the macOS Dashboard, <canvas> has since been implemented in browsers. Today, all major browsers support it.

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

• Canvas topic page

A note to contributors

Due to an unfortunate technical error that occurred the week of June 17, 2013, we lost the history of this tutorial, including attributions to all past contributors to its content. We apologize for this, and hope you'll forgive this unfortunate mishap.

• Next

Help improve MDN

Was this page helpful to you?YesNoLearn how to contribute.

This page was last modified on Nov 15, 2024 by MDN contributors.

View this page on GitHub • Report a problem with this content