rect әдісі

rect әдісі берілген нүктеде тіктөртбұрыш салады. Бұл тіктөртбұрыш stroke әдісін немесе fill әдісін қолданғанда ғана көрінетін болады. Бірінші жағдайда сызықтар контуры болады, ал екінші жағдайда - толтырылған фигура.

Синтаксис

контекст.rect(x, y, ені, биіктігі)

Мысал

rect көмегімен сызықтар контурын салайық:

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

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

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

Мысал

Енді толтырылған фигураны салайық:

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

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

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

Сондай-ақ қараңыз

fillRect әдісі,
ол толтырылған тіктөртбұрыш салады
strokeRect әдісі,
ол тіктөртбұрыш контурын салады