Añadido en HTML5, el elemento HTML {{HTMLElement("canvas")}} se puede usar para dibujar gráficos mediante scripting en JavaScript. Por ejemplo, se puede usar para hacer gráficas, composiciones fotográficas, crear animaciones, o incluso procesado o renderizado de vídeo en tiempo real.

Las aplicaciones de Mozilla soportan <canvas> desde Gecko 1.8 (es decir, Firefox 1.5). El elemento fue inicialmenmte presentado por Apple para el Dashboard de OS X y Safari. Internet Explorer soporta <canvas> desde la versión 9 en adelante; para versiones anteriores de IE, se puede añadir soporte para <canvas> a una página incluyendo un script del proyecto de Google Explorer Canvas. Google Chrome y Opera 9 también soportan <canvas>.

El elemento <canvas> también se usa en WebGL para dibujar gráficos 3D con aceleración por hardware en páginas web.

Ejemplo

Esto es un trozo de código que usa el método {{domxref("CanvasRenderingContext2D.fillRect()")}}.

HTML

JavaScript

Código editable

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

Referencia

{{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}}

Guías y tutoriales

Tutorial Canvas

Tutorial exhaustivo que cubre tanto el uso básico de <canvas> como sus características avanzadas.

Fragmentos de código: Canvas

Algunos fragmentos de código orientados al desarrollador de extensiones usando <canvas>.

Demo: Un laberinto básico

Una demo de una animación de laberinto usando canvas.

Dibujar objetos DOM en un canvas

Cómo dibujar contenido DOM, como elementos HTML, en un canvas.

Manipulación de vídeo usando canvas

Combinando {{HTMLElement("video")}} y {{HTMLElement("canvas")}} para manipular datos de vídeo en tiempo real.

Recursos

Genéricos

Librerías

Fabric.js es una librería open-source para canvas con capacidad de parsear SVG.

Kinetic.js es una librería open-source de canvas enfocada en la interactividad para aplicaciones móviles y de escritorio.

Paper.js es un framework para gráficos vectoriales open source que funciona sobre Canvas HTML5.

Origami.js es una librería ligera open-source para canvas.

libCanvas es un framework ligero y potente para canvas.

Processing.js es un port de PVL (Processing visualization language).

PlayCanvas es un motor open source de juegos.

Pixi.js es un motor open source de juegos.

PlotKit es una librería para hacer gráficas.

Rekapi es una API para animación por frames para Canvas.

PhiloGL es un framework WebGL para visualización de datos, programación creativa y desarrollo de juegos.

JavaScript InfoVis Toolkit crea visualizaciones de datos 2D interactivas para Web.

EaselJS es una librería open source/libre que facilita el uso de canvas para arte y juegos

Scrawl-canvas es otra librería open-source javascript para crear y manipular elementos canvas en 2D

heatmap.js es una librería open-source para crear mapas (heatmaps)

Especificación	Estado	Comentarios
{{SpecName('HTML WHATWG', 'scripting.html#the-canvas-element', '<canvas>')}}	{{Spec2('HTML WHATWG')}}

Especificación

Estado

Comentarios

{{SpecName('HTML WHATWG', 'scripting.html#the-canvas-element', '<canvas>')}}