Premiers pas avec Canvas

Canvas est une surface de dessin interactive implémentée dans HTML sous forme de balise.

Pour utiliser Canvas, trois choses sont nécessaires:

La page doit avoir le doctype HTML 5.
Une balise <canvas>.
Un script en JavaScript

Le doctype HTML 5

Sous Internet Explorer 9 il est indispensable de préciser un DOCTYPE de type HTML 5 sur la première ligne de la page, et il a la forme suivante:

<!DOCTYPE html>

Pour Internet Explorer vous pouvez ajouter dans la section HEAD:

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

Cela évite qu'il change le mode de présentation de la page quand il ne peut la valider.

La balise canvas peut contenir un texte

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

Cette balise n'a pas de contenu HTML, sauf un message ou contenu 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>

Un script simple: afficher un rectangle bleu

Le contenu utile est donné dynamiquement par du code JavaScript. Par exemple, on peut afficher un rectangle.

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 l'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, Internet Explorer 9):

Liste des fonctions graphiques

The Canvas Element. WHATWG.
Canvas 2D Context. Specification W3C.