API canvas

Voilà un simple extrait de code qui utilise la méthode CanvasRenderingContext2D.fillRect().

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

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

Éditez le code ci-dessous pour voir les changements avoir lieu directement dans le canvas:

Code jouable

<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
• CanvasImageSource
• CanvasPattern
• ImageBitmap
• ImageData
• RenderingContext
• TextMetrics
• OffscreenCanvas Expérimental
• Path2D Expérimental ImageBitmapRenderingContext Expérimental

Les interfaces liées au WebGLRenderingContext sont référencées sous WebGL.

CanvasCaptureMediaStream est lié.

Tutoriel canvas

Un tutoriel complet qui couvre à la fois l'usage élémentaire de <canvas> mais aussi ses fonctionnalités avancées.

Extraits de code : Canvas

Quelques extraits de code orientés vers les développeurs d'extension qui utilisent <canvas>.

Demo: Un raycaster basique avec canvas

Une démonstration d'animation utilisant le ray-tracing dans un élément canvas.

Dessiner des objets DOM dans un élément canvas

Comment dessiner un contenu DOM, tel que des éléments HTML, dans un canvas.

Manipulation vidéo avec la balise canvas

Combiner <video> et <canvas> pour manipuler des données video en temps réel.

• HTML5 Canvas Deep Dive (en)
• Canvas Handbook (en)

• Fabric.js est une bibliothèque open-source qui peut analyser du code SVG.
• Kinetic.js est une bibliothèque open-source concentrée sur l'interactivité pour les applications mobiles et de bureau.
• Paper.js est une bibliothèque open-source qui rajoute un système de dessin vectoriel au canvas HTML5.
• Origami.js est une bibliothèque légère open-source pour canvas.
• libCanvas est un framework canvas puissant et léger.
• Processing.js est un portage du langage de visualisation Processing.
• PlayCanvas est un moteur de jeu open-source.
• Pixi.js est un moteur de jeu open-source.
• PlotKit est une bibliothèque permettant de réaliser des diagrammes et des graphiques.
• Rekapi est une API d'animation par key-framing pour Canvas.
• PhiloGL est un framework WebGL pour la visualisation de données, pour la programmation créative et pour le developpement de jeux.
• JavaScript InfoVis Toolkit crée des visualisations de données interactives en 2D avec canvas pour le Web.
• EaselJS est une bibliothèque gratuite/open-source qui facilite l'utilisation de canvas pour faire des jeux ou de l'art
• Scrawl-canvas est une autre bibliothèque open-source pour créer et manipuler des éléments 2D dans canvas
• heatmap.js est une bibliothèque open-source pour créer des cartes thermiques basées sur canvas

• WebGL