Référence Canvas

L'élément HTML5 <canvas> est utilisé pour dessiner des graphiques via des scripts (généralement JavaScript). En lui-même, l'élément <canvas> est un simple conteneur vide — vous y dessinez depuis un script.

Pour obtenir un contexte de dessin, appelez la méthode getContext('2d') de l'élément. Elle retourne un objet CanvasRenderingContext2D :

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d'); // a CanvasRenderingContext2D
ctx.fillStyle = 'green';
ctx.fillRect(10, 10, 100, 80);

Presque toutes les propriétés et méthodes de cette page appartiennent à cet objet de contexte 2D (ctx ci-dessus), et non à l'élément <canvas>. Les deux exceptions sont getContext() et toDataURL(), qui appartiennent à l'élément <canvas> lui-même, ainsi que les propriétés width/height/data dans la section Manipulation des pixels, qui appartiennent aux objets ImageData. Ces éléments sont regroupés dans leurs propres sections ci-dessous.

Pour des tutoriels pas à pas, consultez Introduction à Canvas, dessin de formes, coordonnées, texte et dégradés.

Couleurs, styles et ombres

Consultez le tutoriel Dégradés Canvas pour des exemples détaillés.

Styles de ligne

Rectangles

Chemins

Transformations

Consultez Coordonnées Canvas pour comprendre comment la matrice de transformation associe les positions de dessin aux pixels.

Texte

Consultez le tutoriel Texte Canvas pour des exemples complets.

Dessin d'images

Manipulation des pixels

Les propriétés ci-dessous appartiennent à l'objet ImageData retourné par createImageData() / getImageData(), et non à l'élément <canvas> ou au contexte.

Composition

État du canvas

Ces méthodes appartiennent au contexte 2D et permettent de sauvegarder et restaurer l'état complet du dessin (styles, transformations, région d'écrêtage) sous forme de pile.

L'élément <canvas>

Les membres suivants appartiennent à l'élément <canvas> lui-même, et non au contexte 2D.

Pratique