W3cubDocs

/Web APIs

Canvas API

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨July 2015⁩.

The Canvas API provides a means for drawing graphics via JavaScript and the HTML <canvas> element. Among other things, it can be used for animation, game graphics, data visualization, photo manipulation, and real-time video processing.

The Canvas API largely focuses on 2D graphics. The WebGL API, which also uses the <canvas> element, draws hardware-accelerated 2D and 3D graphics.

Basic example

This simple example draws a green rectangle onto a canvas.

HTML

<canvas id="canvas"></canvas>

JavaScript

The Document.getElementById() method gets a reference to the HTML <canvas> element. Next, the HTMLCanvasElement.getContext() method gets that element's context—the thing onto which the drawing will be rendered.

The actual drawing is done using the CanvasRenderingContext2D interface. The fillStyle property makes the rectangle green. The fillRect() method places its top-left corner at (10, 10), and gives it a size of 150 units wide by 100 tall.

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

ctx.fillStyle = "green";
ctx.fillRect(10, 10, 150, 100);

Result

Reference

Note: The interfaces related to the WebGLRenderingContext are referenced under WebGL.

Note: OffscreenCanvas is also available in web workers.

CanvasCaptureMediaStreamTrack is a related interface.

Guides and tutorials

Canvas tutorial

A comprehensive tutorial covering both the basic usage of the Canvas API and its advanced features.

HTML5 Canvas Deep Dive

A hands-on, book-length introduction to the Canvas API and WebGL.

Canvas Handbook

A handy reference for the Canvas API.

Manipulating video using canvas

Combining <video> and <canvas> to manipulate video data in real time.

Libraries

The Canvas API is extremely powerful, but not always simple to use. The libraries listed below can make the creation of canvas-based projects faster and easier.

  • EaselJS is an open-source canvas library that makes creating games, generative art, and other highly graphical experiences easy.
  • Fabric.js is an open-source canvas library with SVG parsing capabilities.
  • heatmap.js is an open-source library for creating canvas-based data heat maps.
  • JavaScript InfoVis Toolkit creates interactive data visualizations.
  • Konva.js is a 2D canvas library for desktop and mobile applications.
  • p5.js has a full set of canvas drawing functionality for artists, designers, educators, and beginners.
  • Phaser is a fast, free and fun open source framework for Canvas and WebGL powered browser games.
  • Pts.js is a library for creative coding and visualization in canvas and SVG.
  • Rekapi is an animation key-framing API for Canvas.
  • Scrawl-canvas is an open-source JavaScript library for creating and manipulating 2D canvas elements.
  • The ZIM framework provides conveniences, components, and controls for coding creativity on the canvas — includes accessibility and hundreds of colorful tutorials.
  • Sprig is a beginner-friendly, open-source, tile-based game development library that uses Canvas.

Note: See the WebGL API for 2D and 3D libraries that use WebGL.

Specifications

Specification
HTML>
# the-canvas-element>

Browser compatibility

Desktop Mobile
Chrome Edge Firefox Opera Safari Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet WebView Android WebView on iOS
Canvas_API 1 12
1.5["Before Firefox 5, the canvas width and height were signed integers instead of unsigned integers.", "Before Firefox 6, a <canvas> element with a zero width or height would be rendered as if it had default dimensions.", "Before Firefox 12, if JavaScript is disabled, the <canvas> element was being rendered instead of showing the fallback content as per the specification. Since then, the fallback content is rendered instead."]
 9
2Although early versions of Apple's Safari browser don't require the closing tag, the specification indicates that it is required, so you should be sure to include it for broadest compatibility. Before version 2, Safari will render the content of the fallback in addition to the canvas itself unless you use CSS tricks to mask it.
 18
4["Before Firefox for Android 5, the canvas width and height were signed integers instead of unsigned integers.", "Before Firefox for Android 6, a <canvas> element with a zero width or height would be rendered as if it had default dimensions.", "Before Firefox for Android 14, if JavaScript is disabled, the <canvas> element was being rendered instead of showing the fallback content as per the specification. Since then, the fallback content is rendered instead."]
 10.1 1 1.0 37 1
height 1 12
1.5["Before Firefox 5, the canvas width and height were signed integers instead of unsigned integers.", "Before Firefox 6, a <canvas> element with a zero width or height would be rendered as if it had default dimensions.", "Before Firefox 12, if JavaScript is disabled, the <canvas> element was being rendered instead of showing the fallback content as per the specification. Since then, the fallback content is rendered instead."]
 9
2Although early versions of Apple's Safari browser don't require the closing tag, the specification indicates that it is required, so you should be sure to include it for broadest compatibility. Before version 2, Safari will render the content of the fallback in addition to the canvas itself unless you use CSS tricks to mask it.
 18
4["Before Firefox for Android 5, the canvas width and height were signed integers instead of unsigned integers.", "Before Firefox for Android 6, a <canvas> element with a zero width or height would be rendered as if it had default dimensions.", "Before Firefox for Android 14, if JavaScript is disabled, the <canvas> element was being rendered instead of showing the fallback content as per the specification. Since then, the fallback content is rendered instead."]
 10.1 1 1.0 37 1
moz-opaque No No 3.5 No No No 4 No No No No No
width 1 12
1.5["Before Firefox 5, the canvas width and height were signed integers instead of unsigned integers.", "Before Firefox 6, a <canvas> element with a zero width or height would be rendered as if it had default dimensions.", "Before Firefox 12, if JavaScript is disabled, the <canvas> element was being rendered instead of showing the fallback content as per the specification. Since then, the fallback content is rendered instead."]
 9
2Although early versions of Apple's Safari browser don't require the closing tag, the specification indicates that it is required, so you should be sure to include it for broadest compatibility. Before version 2, Safari will render the content of the fallback in addition to the canvas itself unless you use CSS tricks to mask it.
 18
4["Before Firefox for Android 5, the canvas width and height were signed integers instead of unsigned integers.", "Before Firefox for Android 6, a <canvas> element with a zero width or height would be rendered as if it had default dimensions.", "Before Firefox for Android 14, if JavaScript is disabled, the <canvas> element was being rendered instead of showing the fallback content as per the specification. Since then, the fallback content is rendered instead."]
 10.1 1 1.0 37 1

See also

© 2005–2025 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API