Metode Canvas fillRect()

Definisi dan penggunaan

fillRect() Metode untuk menggambar persegi panjang yang diisi. Warna pengisi baku adalah hitam.

Petunjuk:Dipakai fillStyle Atur warna, gradasi, atau pola pengisian yang digunakan untuk menggambar.

Contoh

Menggambar persegi panjang berisi 150*100 piksel:

Peramban Anda tidak mendukung tag HTML5 canvas.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillRect(20,20,150,100);

Coba sendiri

Sintaksis

context.fillRect(x,y,width,height);

Nilai parameter

Parameter Deskripsi
x Koordinat x atas kiri persegi panjang.
y Koordinat y atas kiri persegi panjang.
width Lebar persegi panjang, dalam satuan piksel.
height Tinggi kotak, dihitung dalam piksel.

Dukungan Browser

Angka di tabel menunjukkan versi browser pertama yang mendukung properti ini penuh.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.6 4.0 10.1

Keterangan:Internet Explorer 8 dan versi sebelumnya tidak mendukung elemen <canvas>.