Premiers pas avec Canvas

Canvas est une balise HTML pour une surface de dessin interactive implémentée. Son utilisation est très simple.

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

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

1) Le doctype HTML 5

Il est surtout nécessaire pour Internet Explorer 9, il est indispensable de préciser un DOCTYPE de type HTML 5 sur la première ligne de la page, sous la forme suivante:

<!DOCTYPE html> 

Pour Internet Explorer vous pouvez aussi 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.

2) Une balise canvas

Un id est nécessaire pour accèder à la balise en JavaScript:

<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>   

3) Un script en JavaScript

Le contenu utile 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 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):

Rien ne s'affichera sous Internet Explorer 8 et versions plus anciennes qui ne reconnaissant pas la balise canvas.

Liste des fonctions graphiques de l'API Canvas

Regardez cette démonstration

Voir aussi