Rectangle
La seule forme primitive en canvas est le rectangle.
Définition : Rectangle plein
1
fillRect(x, y, largeur, hauteur)
1
const ctx = canvas.getContext('2d');
2
ctx.fillRect(50,40,60,40);
Canvas - Principe
Définition : Contour de rectangle
1
strokeRect(x, y, largeur, hauteur)
1
const canvas = document.querySelector("canvas");
2
const ctx = canvas.getContext('2d');
3
ctx.strokeRect(40, 30, 80, 60);
Canvas - Principe
Définition : Évider
On peut créer un rectangle de fond transparent, afin d'évider une zone.
1
clearRect(x, y, largeur, hauteur)
1
const canvas = document.querySelector("canvas");
2
const ctx = canvas.getContext('2d');
3
ctx.fillRect(40, 30, 80, 60);
4
ctx.clearRect(70, 40, 30, 45);
Canvas - Principe