L'API Canvas

Principe

Canvas

La balise <canvas> de HTML5 crée un élément vide, sur lequel le code Javascript peut « dessiner » pour créer des images dynamiquement.

<canvas id="mycanvas" width="400" height="300"></canvas>

Note

La largeur et la hauteur, fixées dans la balise canvas, représentent sa taille initiale en pixels.

Si le canvas est redimensionné par CSS, sa taille d'affichage changera, et ses pixels seront redimensionnés en conséquence, mais le nombre de pixels (en largeur et en hauteur) ne changera pas.

Contexte

Pour pouvoir dessiner sur un canvas, il faut d'abord récupérer un objet contexte :

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

Différents types de contexte

2d permet de générer des images 2D
webgl permet de générer des images 3D en utilisant le GPU (cf. http://webgl.org/)
d'autres contextes peuvent apparaître à l'avenir

Commandes de bases pour le contexte 2D

Définir les couleurs

L'attribut strokeStyle permet de définir la couleur des traits qui seront dessinés.
L'attribut fillStyle permet de définir la couleur de remplissage.
Ces attributs prennent en paramètre une chaîne, contenant n'importe quelle description de couleur valide en CSS.

Exemple :

ctx.strokeStyle = "red";
ctx.fillStyle = "#00FF00";

Note

Ces commandes ne dessinent rien par elles-mêmes, elles conditionnent le comportement des commandes lancées ensuite.

Dessiner un rectangle

La méthode strokeRect(x, y, w, h) permet de dessiner le contour d'un rectangle, en utilisant la couleur définie par strokeStyle.
La méthode fillRect(x, y, w, h) permet de dessiner un rectangle plein, en utilisant la couleur définie par fillStyle.
x et y indiquent le coin supérieur gauche du rectangle, w indique sa largeur, h indique sa hauteur. Ces valeurs sont données en pixels, mais peuvent être des nombres flottants.

Exemple :

ctx.fillRect(canvas.width/4, canvas.height/4,
             canvas.width/2, canvas.height/2);

Largeur de ligne

En plus de leur couleur, il est possible de choisir la largeur des lignes dessinées sur le canvas (par exemple par strokeRect).

Ceci se fait en changeant l'attribut lineWidth. Sa valeur est exprimée en pixels (mais peut être un nombre flottant).

Pour aller plus loin

Projet

Votre travail

Écrivez une application de dessin en utilisant canvas et le contexte 2d.
Il pourra être nécessaire d'utiliser les événements mousedown, mousemove et mouseup.
Ces événements ont notamment deux attributs pageX et pageY indiquant les coordonnées de la souris dans la page, à comparer avec les coordonnées de l'élément: canvas.offsetLeft et canvas.offsetTop.

Pour aller plus loin

Autres utilisations

Un canvas transparent peut être positionné par dessus d'autres éléments (avec une utilisation judicieuse du CSS).
Le contexte 2d peut également faire une "photographie" d'un élément graphique (image, vidéo, autre canvas) de la page à l'aide de la méthode drawImage.

Autres manières de gérer le graphisme

Une alternative aux Canvas est SVG (Standard Vector Graphics), un langage à balises similaire à HTML mais servant à décrire des images.

Ce langage est intégré à HTML5 et peut notamment être manipulé dans l'arbre DOM par du code Javascript.

Exemple :

<svg>
  <rect x="10" y="10" width="20" height="20"
        stroke="red" fill="lightYellow"></rect>
  <rect x="50" y="10" width="20" height="20"
        stroke="blue" fill="lightGreen"></rect>
</svg>