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

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

Contoh

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

Contoh

Dan sekarang mari gambar bentuk terisi:

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

Lihat juga

metode fillRect,
yang menggambar persegi panjang terisi
metode strokeRect,
yang menggambar garis luar persegi panjang