Metode rect

Metode rect menggambar persegi panjang pada titik yang ditentukan. Persegi panjang ini akan terlihat hanya jika metode stroke atau fill diterapkan. Dalam kasus pertama akan menjadi garis luar (outline), dan dalam kasus kedua - menjadi bentuk terisi.

Sintaks

javascriptkonteks.rect(x, y, lebar, tinggi)

Contoh

Mari gambar garis luar menggunakan 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();

Результат:

Contoh

Dan sekarang mari gambar bentuk terisi:

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

Результат:

Lihat juga