API Canvas

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

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

• HTMLCanvasElement
• CanvasRenderingContext2D
• CanvasGradient (en-US)
• CanvasImageSource
• CanvasPattern (en-US)
• ImageBitmap
• ImageData (en-US)
• RenderingContext
• TextMetrics (en-US)
• OffscreenCanvas (en-US) Experimental
• Path2D (en-US) Experimental ImageBitmapRenderingContext Experimental

Las interfaces relacionadas con WebGLRenderingContext están en WebGL.

CanvasCaptureMediaStream (en-US) está relacionado..

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.

• Profundizando en HTML5 Canvas
• Manual de Canvas

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

• WebGL