Canvas API

{{DefaultAPISidebar("Canvas API")}} 

The Canvas API provides a means for drawing graphics via JavaScript and the HTML {{HtmlElement("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 {{domxref("Document.getElementById()")}}  method gets a reference to the HTML <canvas> element. Next, the {{domxref("HTMLCanvasElement.getContext()")}}  method gets that element’s context—the thing onto which the drawing will be rendered.

The actual drawing is done using the {{domxref("CanvasRenderingContext2D")}}  interface. The {{domxref("CanvasRenderingContext2D.fillStyle", "fillStyle")}}  property makes the rectangle green. The {{domxref("CanvasRenderingContext2D.fillRect()", "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

{{ EmbedLiveSample('Basic_example', 700, 180) }} 

Reference

• {{domxref("HTMLCanvasElement")}} 
• {{domxref("CanvasRenderingContext2D")}} 
• {{domxref("CanvasGradient")}} 
• {{domxref("CanvasPattern")}} 
• {{domxref("ImageBitmap")}} 
• {{domxref("ImageData")}} 
• {{domxref("TextMetrics")}} 
• {{domxref("OffscreenCanvas")}} 
• {{domxref("Path2D")}}  {{experimental_inline}} 
• {{domxref("ImageBitmapRenderingContext")}}  {{experimental_inline}} 

[!NOTE] The interfaces related to the WebGLRenderingContext are referenced under WebGL.

Note: {{domxref("OffscreenCanvas")}}  is also available in web workers.

{{domxref("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 {{HTMLElement("video")}}  and {{HTMLElement("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.
• Paper.js is an open-source vector graphics scripting framework that runs on top of the HTML Canvas.
• 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

{{Specifications}} 

Browser compatibility

{{Compat}} 

See also

• WebGL