L'élément canvas d'HTML5 fournit une surface pour dessiner des graphiques au moyen de scripts, principalement en JavaScript. Cet espace de travail supporte le rendu de formes géométriques, de texte, d'images et de dégradés, remplaçant les solutions propriétaires comme Flash pour les appplications graphiques web.

Configuration de base d'un canvas

Pour utiliser un canvas, on l'insère dans le HTML avec des dimensions définies, puis on interagit via le contexte 2D obtenu par JavaScript.

<canvas id="surfaceDessin" width="400" height="200" style="border:1px solid #ccc;">
  Votre navigateur ne prend pas en charge le canvas.
</canvas>

Exemple de dessin d'un rcetangle :

var zoneCanvas = document.getElementById("surfaceDessin");
var contexte2D = zoneCanvas.getContext("2d");
contexte2D.fillStyle = "rgb(0, 120, 215)";
contexte2D.fillRect(30, 20, 120, 80);

Traçage de formes et de lignes

Pour dessiner une ligne, on définit des points de départ et d'arrivée avec moveTo et lineTo, puis on applique stroke.

contexte2D.beginPath();
contexte2D.moveTo(50, 100);
contexte2D.lineTo(250, 100);
contexte2D.strokeStyle = "green";
contexte2D.lineWidth = 3;
contexte2D.stroke();

Création de cercles avec l'arc

La méthode arc permet de tracer des arcs de cercle en spécifiant le centre, le rayon et les angles.

contexte2D.beginPath();
contexte2D.arc(200, 100, 40, 0, Math.PI * 2, false);
contexte2D.strokeStyle = "red";
contexte2D.stroke();

Rendu de texte

On peut afficher du texte rempli ou en contour à l'aide de fillText et strokeText.

contexte2D.font = "20px Verdana";
contexte2D.fillStyle = "black";
contexte2D.fillText("Texte canvas", 150, 50);
contexte2D.strokeStyle = "blue";
contexte2D.strokeText("Contour", 150, 80);

Effets de dégradés

Les dégradés linéaires créent une transition de couleur droite entre deux points.

var degradLineaire = contexte2D.createLinearGradient(0, 0, 300, 0);
degradLineaire.addColorStop(0, "purple");
degradLineaire.addColorStop(1, "yellow");
contexte2D.fillStyle = degradLineaire;
contexte2D.fillRect(10, 150, 280, 40);

Les dégradés radiaux forment une progression circulaire depuis un centre vers un périmètre.

var degradRadial = contexte2D.createRadialGradient(200, 100, 10, 200, 100, 80);
degradRadial.addColorStop(0, "cyan");
degradRadial.addColorStop(1, "magenta");
contexte2D.fillStyle = degradRadial;
contexte2D.fillRect(50, 50, 300, 100);

Intégration d'images

Pour placer une image sur le canvas, on utilise drawImage une fois le chargement terminé.

<canvas id="canvasImage" width="300" height="250"></canvas>
<script>
var canvasImg = document.getElementById("canvasImage");
var ctxImg = canvasImg.getContext("2d");
var imgElement = new Image();
imgElement.src = "paysage.jpg";
imgElement.onload = function() {
    ctxImg.drawImage(imgElement, 25, 25, 250, 200);
};
</script>