Metode createPattern() kanvas HTML

Gambar yang akan digunakan:

Lampu

Contoh

Ulangi gambar baik secara horizontal maupun vertikal:

JavaScript:

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("lamp");
var pat = ctx.createPattern(img, "repeat");
ctx.rect(0, 0, 150, 100);
ctx.fillStyle = pat;
ctx.fill();

Dukungan Peramban

Angka-angka dalam tabel menentukan versi browser pertama yang sepenuhnya mendukung metode ini.

Method
createPattern()	Yes	9.0	Yes	Yes	Yes

Definisi dan Penggunaan

Metode createPattern() mengulangi elemen yang ditentukan dalam arah yang ditentukan.

Elemen tersebut dapat berupa gambar, video, atau elemen <canvas> lainnya.

Elemen berulang dapat digunakan untuk menggambar/mengisi persegi panjang, lingkaran, garis, dll.

Sintaks JavaScript:	konteks .createPattern( image ,"repeat\|repeat-x\|repeat-y\|no-repeat");

Nilai Parameter

Parameter	Description	Play it
image	Specifies the image, canvas, or video element of the pattern to use
repeat	Default. The pattern repeats both horizontally and vertically
repeat-x	The pattern repeats only horizontally
repeat-y	The pattern repeats only vertically
no-repeat	The pattern will be displayed only once (no repeat)

Referensi Kanvas HTML