Metode HTML canvas fillRect()

Definisi dan penggunaan

fillRect() Metode untuk menggambar segi empat yang diisi warna. Warna standar pengisi adalah hitam.

Petunjuk:Gunakan fillStyle Properti untuk menetapkan warna, gradasi, atau pola yang digunakan untuk mengisi gambar.

Contoh

Gambar segi empat berisi yang diisi berukuran 150*100 pixel:

Browser 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

Syarat

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

Nilai Parameter

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

Dukungan Browser

Angka di tabel menunjukkan versi browser pertama yang mendukung atribut ini.

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>.