Premiers pas avec Canvas

Canvas est une balise HTML pour des graphismes dans une surface de dessin interactive. Son utilisation est très simple.

En effet, trois choses seulement sont nécessaires pour utiliser Canvas:

Une page HTML avec le doctype HTML 5.
Une balise <canvas>.
Un peu de code JavaScript

1) Le doctype HTML 5

Il est indispensable de préciser un DOCTYPE sur la première ligne de la page, qui pour HTML 5 a la forme suivante:

<!DOCTYPE html>

2) Une balise canvas

La balise doit avoir un attribut "id" pour qu'on puisse la référencer dans le code JavaScript:

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

Cette balise n'a pas de contenu HTML, sauf éventuellement un message qui s'affiche seulement dans les navigateurs anciens qui ne reconnaissent pas HTML 5. Par exemple:

<canvas id="moncanevas" width="400" height="300">
  Canvas n'est pas implémenté dans ce navigateur.
</canvas>

3) Un script en JavaScript

Le contenu de <canvas> est donné dynamiquement par du code JavaScript. Par exemple, on peut afficher un rectangle bleu.

canvas = document.getElementById("moncanevas"); 
if (canvas.getContext)
{    
    context = canvas.getContext('2d'); 
}
function rectangle()
{
   context.fillRect(100,0,80,80);     
}

Le script sera démarré par l'évènement onload associée à la balise <body> ou à l'élément window.
Dans cet exemple on crée la fonction setCanvas() et on l'assigne à onload:

function setCanvas()
{
  var canvas = document.getElementById("moncanevas"); 
  var context = canvas.getContext("2d");
  context.fillStyle = "blue"   
  context.fillRect(100,0,200,100);
}
window.onload=setCanvas;

L'attribut fillStyle assigne une couleur courante au contexte, qui sera celle des objets dessinés par la suite. On peut lui assigner un nom de couleur, un code rgb ou rgba.
La méthode fillRect affiche un rectangle rempli avec la couleur courante, et à pour paramètres, x, y, largeur, hauteur.

Démonstration (Firefox, Chrome, Edge, Safari, Opera):

Liste des fonctions graphiques de l'API Canvas

Canvas Element. Specification W3C.

Regardez cette démonstration

Zoomquilt. Dans le même esprit que infinite Oz qui est réalisé en Flash, mais cette fois en JavaScript dans Canvas, une image sans fin qui à coté du divertissement qu'elle apporte, permet de comparer la vitesse des navigateurs.

Voir aussi