La balise <canvas> est élément HTML qui peut être utilisé pour dessiner et animer des éléments graphiques à l'aide de scripts JavaScript notamment.

Cette activité présente les bases d'utilisation de l'élément <canvas> pour dessiner des graphiques en 2D.

Voici un élément <canvas> avec un contenu de repli affichant le texte Canvas non supporté par votre navigateur !.

<canvas id="affichagefleche" width="150" height="150">
   Canvas non supporté par votre navigateur !
</canvas>

L'élément <canvas> crée une surface vide pour dessiner à grandeur fixe selon un ou plusieurs contextes de rendu. Ici nous utiliserons le contexte de rendu 2D.

Pour afficher quelque chose, le script javascript doit :

• sélectionner l'élément <canvas> grâce à son id
• et accéder au contexte de rendu 2d pour pouvoir dessiner dessus grâce à la méthode getContext(“2d”).

<canvas id="mon_canvas" width="350" height="350">
   Canvas non supporté par votre navigateur !
</canvas>
<script>
var canvas = document.getElementById('mon_canvas');
var ctx = canvas.getContext('2d');
</script>

Un canvas est un espace de pixels initialement transparents sue lequel vous pouvez dessiner des formes, mettre des images et les animer.

• Le point d'origine (0,0) est situé en haut à gauche,
• Pour les coordonnées (x,y) :
  • L'axe horizontal correspond à x,
  • L'axe vertical à y.

Ces valeurs correspondent à la grille entourant les pixels, et non pas aux pixels eux-mêmes

Pour réaliser un tracé, il faut utiliser les méthodes suivantes :

• beginPath() pour l'initialiser
• moveTo(x,y) pour définir le début du tracé,
• lineTo(x,y) pour tracer la ligne elle-même ce qui va ajouter un segment au chemin commencé par beginPath(),
• ajouter autant de trajet que l'on souhaite.
• closePath() pour éventuellement fermer la forme et revenir automatiquement au point de départ.

ctx.beginPath();      // Début du chemin
ctx.moveTo(50,50);    // Le tracé part du point 50,50
ctx.lineTo(200,200);  // Un segment est ajouté vers 200,200
ctx.moveTo(200,50);   // Puis on saute jusqu'à 200,50
ctx.lineTo(50,200);   // Puis on trace jusqu'à 50,200
ctx.closePath(); 

Pour afficher le résultat il faut maintenant préciser les couleurs, le style de trait ou de remplissage :

• stroke() permet l'affichage du contour,
• fill() permet de remplir une forme

ctx.stroke();

Cela affiche le tracé avec les couleurs par défaut. Pour modifier les styles par défaut :

• fillStyle en précisant la couleur de remplissage par son nom (red, black), par code hexadécimal (#f00, #000000), par code rgb, etc.
• strokeStyle en précisant la couleur du trait.
• lineWidth en précisant l'épaisseur du trait (1 pixel par défaut).

// Triangle
ctx.beginPath();      // Début du chemin
ctx.moveTo(150,80);   // Le tracé part du point 150,80
ctx.lineTo(300,230);  // Un segment est ajouté vers 300,230
ctx.lineTo(150,230);  // Un segment est ajouté vers 150,230
ctx.closePath();      // Fermeture du chemin
ctx.fillStyle = "lightblue"; // Définition de la couleur de remplissage
ctx.strokeStyle = "sienna"; // Définition de la couleur de contour
ctx.lineWidth = 5; 
ctx.fill();           // Remplissage du dernier chemin tracé
ctx.stroke();          // Application du contour

Pour dessiner un Carré ou un rectangle on précise :

• sa hauteur, sa largeur, son point de départ pour les coordonnées startx, starty,
• en utilisant la fonction fillRect()

fillRect(startx, starty, hauteur, largeur)

clearRect(startx, starty, hauteur, largeur)

Deux méthodes sont disponibles :

• arcTo()
• arc() qui définit les coordonnées centrales de l'arc, son rayon (toujours en pixels), l'angle de début et de fin, et enfin dans quel sens le pinceau va tourner grâce à un booléen.

arc( x, y, radius, startAngle, endAngle, sensAntiHoraire )

ctx.arc(150,150,100,0,Math.PI*2,true);

Il faut utiliser :

• le constructeur new Image() pour initialiser une nouvelle image grâce au constructeur new Image() ;
• la propriété src (adresse de l'image) qui est indiquée permet au navigateur de charger l'image en arrière-plan
• l'événement load grâce à la propriété onload pour écrire une fonction de callback qui utilisera l'image lorsque celle-ci aura été totalement reçue. Cette phase est absolument nécessaire : les chargements sont asynchrones et il est impossible de savoir exactement quand une ressource sera prête, sous peine de ne rien voir s'afficher du tout.
• La méthode drawImage(img,x,y) copie l'image img chargée sur la surface de dessin, aux coordonnées (x,y). Il est possible de se resservir de la même ressource image une infinité de fois.

var image = new Image(); 
image.src = 'hat.jpg';
image.onload = function() {
  // Cette fonction est appelée lorsque l'image a été chargée
  ctx.drawImage(this,50,50); // this fait référence à l'objet courant (=image)
};

Voici deux liens parmi d'autres pour découvrir l'utilisation des Canvas en HTML 5 :

• https://www.alsacreations.com/tuto/lire/1484-introduction.html
• https://developer.mozilla.org/fr/docs/Tutoriel_canvas