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

<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:

Referencia

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>.
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 <video> y <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)

Especificaciones

Especificación Estado Comentarios
HTML Living Standard
La definición de '<canvas>' en esta especificación.
Living Standard  

Ver también

Etiquetas y colaboradores del documento

Última actualización por: lajaso,