Canvas API

Afegit en HTML5, l'element HTML <canvas> pot ser usat per dibuixar gràfics a través de scripts en JavaScript. Per exemple, es pot utilitzar per dibuixar gràfics, fer composicions fotogràfiques, crear animacions o, fins i tot, processar o representar vídeos en temps real.

Les aplicacions de Mozilla van obtenir compatibilitat amb <canvas> a partir de Gecko 1.8 (és a dir Firefox 1.5). L'element va ser introduït originalment per Apple per al tauler OS X i Safari. Internet Explorer suporta <canvas> a partir de la versió 9; per a versions anteriors de IE, una pàgina pot efectivament afegir suport per <canvas> en incloure un script del projecte Google's Explorer Canvas. Google Chrome i Opera 9 també són compatibles amb <canvas>.

L'element <canvas> també és utilitzat per WebGL per dibuixar gràfics 3D accelerats per maquinari en pàgines web.

Aquest és només un fragment de codi senzill que utilitza el mètode CanvasRenderingContext2D.fillRect().

<canvas id="canvas"></canvas>

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

ctx.fillStyle = 'green';
ctx.fillRect(10, 10, 100, 100);

Editeu el codi següent i vegeu els canvis actualitzats en directe al llenç:

Les interfícies relacionades amb WebGLRenderingContext estan referenciades en WebGL.

CanvasCaptureMediaStream està relacionat.

Tutorial Canvas

Un tutorial complet que abasta tant l'ús bàsic de <canvas> com les seves funcions avançades.

Fragments de codi: Canvas

Alguns fragments de codi orientats a desenvolupadors d'extensions que involucren <canvas>.

Demostració: Un llançador de rajos bàsic

Una demostració d'animació de traçat de rajos usant canvas.

Dibuixar objectes DOM en canvas

Com dibuixar contingut DOM, com ara elements HTML, dins de canvas.

Manipular vídeo utilitzant canvas

Combinar <video> i <canvas> per manipular dades de vídeo en temps real.

• Aprofundint en  canvas HTML5
• Manual de Canvas

• Fabric.js és una biblioteca de canvas de codi obert amb funcions d'anàlisi de SVG.
• Kinetic.js  és una biblioteca de canvas de codi obert centrada en la interactivitat per a aplicacions d'escriptori i mòbils.
• Paper.js és un marc de seqüències d'ordres gràfiques de vectors, de codi obert que s'executa a la part superior de Canvas HTML5.
• Origami.js és una biblioteca de canvas lleugera de codi obert.
• libCanvas és un marc de canvas potent i lleuger.
• Processing.js és un port del llenguatge de visualització de processament.
• PlayCanvas és un motor de joc de codi obert.
• Pixi.js és un motor de joc de codi obert.
• PlotKit és una biblioteca mapes gràfics i gràfics.
• Rekapi és una API d'animació d'emmarcat de tecles per Canvas.
• PhiloGL és un marc WebGL per a la visualització de dades, codificació creativa i el desenvolupament de jocs
• JavaScript InfoVis Toolkit crea visualitzacions interactives de dades 2D Canvas per la Web.
• EaselJS és una biblioteca de codi obert/lliure per facilitar l'ús de canvas en jocs i art
• Scrawl-canvas és una altra biblioteca de codi obert Javascript per crear i manipular elements 2d canvas.
• heatmap.js és una biblioteca de codi obert per crear mapes de calor basats en canvas.

• WebGL