--- title: API de Canvas slug: Web/API/API_de_canvas 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 draw hardware-accelerated 3D graphics on web pages.

Exemplo

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);

Referência

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

The interfaces related to the WebGLRenderingContext are referenced under WebGL.

{{domxref("CanvasCaptureMediaStream")}} is related.

Guias e tutoriais

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.

Recursos

Genérico

Bibliotecas

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.
Origami.js is an open source lightweight canvas library.
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
Scrawl-canvas is another open-source javascript library for creating and manipulating 2d canvas elements
heatmap.js is an open source library to create canvas based heatmaps

Especificações

Epecificação	Estado	Comentário
{{SpecName('HTML WHATWG', 'scripting.html#the-canvas-element', '<canvas>')}}	{{Spec2('HTML WHATWG')}}

Consulte também

WebGL (Biblioteca de Gráficos da Web)