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
<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
HTMLCanvasElement
CanvasRenderingContext2D
CanvasGradient
CanvasPattern
ImageBitmap
ImageData
RenderingContext
TextMetrics
OffscreenCanvas
ExperimentalPath2D
ExperimentalImageBitmapRenderingContext
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.
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
Specification |
---|
HTML Standard # the-canvas-element |