Metod rect

Metod rect crta pravougaonik na zadatoj tački. Ovaj pravougaonik će postati vidljiv samo ako se primeni metod stroke ili fill. U prvom slučaju biće kontura, a u drugom - popunjena figura.

Sintaksa

javascriptkontekst.rect(x, y, širina, visina)

Primer

Hajde da nacrtamo konturu pomoću 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();

Результат:

Primer

A sada hajde da nacrtamo popunjenu figuru:

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();

Результат:

Pogledajte takođe