API Canvas

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.

Añadido en HTML5, el elemento HTML <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 CanvasRenderingContext2D.fillRect().

HTML

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

Edita este código para ver tus cambios en tiempo real en este canvas:

<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

HTMLCanvasElement
CanvasRenderingContext2D
CanvasGradient
CanvasPattern
ImageBitmap
ImageData
RenderingContext
TextMetrics
OffscreenCanvas Experimental
Path2D Experimental ImageBitmapRenderingContext Experimental

Las interfaces relacionadas con WebGLRenderingContext están en WebGL.

CanvasCaptureMediaStream está relacionado..

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>.
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 <video> y <canvas> para manipular datos de vídeo en tiempo real.

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)

Especificaciones

Specification
HTML Standard # the-canvas-element

Ver también

WebGL