Méthode rect

La méthode rect dessine un rectangle à un point donné. Ce rectangle ne deviendra visible que si la méthode stroke ou fill est appliquée. Dans le premier cas, ce sera un contour, et dans le second - une forme remplie.

Syntaxe

javascriptcontexte.rect(x, y, largeur, hauteur)

Exemple

Dessinons un contour à l'aide de rect :

html<canvas id="canvas" width="200" height="200" style="background: #f4f4f4;"></canvas>

javascriptlet canvas = document.querySelector('#canvas');
let ctx = canvas.getContext('2d');

ctx.rect(50, 50, 100, 75);
ctx.stroke();

Результат:

Exemple

Et maintenant, dessinons une forme remplie :

html<canvas id="canvas" width="200" height="200" style="background: #f4f4f4;"></canvas>

javascriptlet canvas = document.querySelector('#canvas');
let ctx = canvas.getContext('2d');

ctx.rect(50, 50, 100, 75);
ctx.fill();

Результат:

Voir aussi