--- title: Canvas API slug: Web/API/Canvas_API tags: - API - Canvas - NeedsTranslation - Overview - Reference - TopicStub translation_of: Web/API/Canvas_API ---

Added in HTML5, the HTML {{HTMLElement("canvas")}} element can be used to draw graphics via scripting in JavaScript. For example, it can be used to draw graphs, make photo compositions, create animations, or even do real-time video processing or rendering.

Mozilla applications gained support for <canvas> starting with Gecko 1.8 (i.e. Firefox 1.5). The element was originally introduced by Apple for the OS X Dashboard and Safari. Internet Explorer supports <canvas> from version 9 onwards; for earlier versions of IE, a page can effectively add support for <canvas> by including a script from Google's Explorer Canvas project. Google Chrome and Opera 9 also support <canvas>.

The <canvas> element is also used by WebGL to do hardware-accelerated 3D graphics on web pages.

Example

This is just a simple code snippet which uses the {{domxref("CanvasRenderingContext2D.fillRect()")}} method.

HTML

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

JavaScript

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

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

Edit the code below and see your changes update live in the canvas:

Playable code

<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
<div class="playable-buttons">
  <input id="edit" type="button" value="Edit" />
  <input id="reset" type="button" value="Reset" />
</div>
<textarea id="code" class="playable-code">
ctx.fillStyle = "green";
ctx.fillRect(10, 10, 100, 100);</textarea>

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var textarea = document.getElementById("code");
var reset = document.getElementById("reset");
var edit = document.getElementById("edit");
var code = textarea.value;

function drawCanvas() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  eval(textarea.value);
}

reset.addEventListener("click", function() {
  textarea.value = code;
  drawCanvas();
});

edit.addEventListener("click", function() {
  textarea.focus();
})

textarea.addEventListener("input", drawCanvas);
window.addEventListener("load", drawCanvas);

Reference

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

The interfaces related to the WebGLRenderingContext are referenced under WebGL.

Guides and tutorials

Canvas tutorial: A comprehensive tutorial covering both the basic usage of <canvas> and its advanced features.
Code snippets: Canvas: Some extension developer-oriented code snippets involving <canvas>.
Demo: A basic ray-caster: A demo of ray-tracing animation using canvas.
Drawing DOM objects into a canvas: How to draw DOM content, such as HTML elements, into a canvas.
Manipulating video using canvas: Combining {{HTMLElement("video")}} and {{HTMLElement("canvas")}} to manipulate video data in real time.

Resources

Generic

Libraries

Fabric.js is an open-source canvas library with SVG parsing capabilities.
Kinetic.js is an open-source canvas library focused on interactivity for desktop and mobile applications.
Paper.js is an open source vector graphics scripting framework that runs on top of the HTML5 Canvas.
libCanvas is powerful and lightweight canvas framework.
Processing.js is a port of the Processing visualization language.
PlayCanvas is an open source game engine.
Pixi.js is an open source game engine.
PlotKit is a charting and graphing library.
Rekapi is an animation key-framing API for Canvas.
PhiloGL is a WebGL framework for data visualization, creative coding and game development.
JavaScript InfoVis Toolkit creates interactive 2D Canvas data visualizations for the Web.
EaselJS is a free/open source library to make it easier to use canvas for games and art

Specifications

Specification	Status	Comment
{{SpecName('HTML WHATWG', "the-canvas-element.html", "Canvas")}}	{{Spec2('HTML WHATWG')}}