Principe

La balise canvas permet de définir une zone de dessin dont le contenu sera réalisé à l'aide du JavaScript.

1
<canvas width="400" height="300">
2
  Contenu vu par les navigateurs ne supportant pas canvas
3
</canvas>

DéfinitionLe contexte

Après avoir récupéré l'objet canvas, il nous faut récupérer l'objet qui correspond au contexte de rendu.

1
const canvas = document.querySelector("canvas");
2
const ctx = canvas.getContext('2d');

C'est l'objet ctx qui permettra d'ajouter et paramétrer des objets dans notre canvas.

ExempleExemple

Rectangle gris de largeur 60 de hauteur 40 aux coordonnées (100, 100)

1
const canvas = document.querySelector("canvas");
2
const ctx = canvas.getContext('2d');
3
ctx.fillStyle = 'rgb(100,100,100)';
4
ctx.fillRect(100,100,60,40);
5
 Contenu vu par les navigateurs de supportant pas canvas 



Canvas - Principe