Metode drawImage() HTML canvas

Panduan Referensi HTML5 Canvas

Definisi dan penggunaan

drawImage() Metode untuk menggambar gambar, kanvas, atau video di atas kanvas.

drawImage() Metode ini juga dapat digunakan untuk menggambar bagian tertentu gambar, serta/atau menambahkan atau mengurangi ukuran gambar.

Contoh

Contoh 1

Gambar yang akan digunakan:

tulip

Gambar yang digambar ke atas kanvas:

Browser Anda tidak mendukung tag HTML5 canvas.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("tulip");
ctx.drawImage(img,10,10);

Coba Sendiri

Petunjuk:Lebih banyak contoh disediakan di bagian bawah halaman.

Kalimat

Bentuk kalimat JavaScript 1

Tentukan posisi gambar di atas kanvas:

context.drawImage(img,x,y);

Bentuk kalimat JavaScript 2

Tentukan posisi gambar di atas kanvas dan tentukan lebar dan tinggi gambar:

context.drawImage(img,x,y,width,height);

Bentuk kalimat JavaScript 3

Potong gambar dan tentukan posisi bagian yang dipotong di atas kanvas:

context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);

Nilai parameter

Parameter Deskripsi
img Tentukan gambar, kanvas, atau video yang akan digunakan.
sx Pilihan. Posisi x awal pemotongan.
sy Pilihan. Posisi y awal pemotongan.
swidth Pilihan. Lebar gambar yang dipotong.
sheight Pilihan. Tinggi gambar yang dipotong.
x Tentukan posisi x koordinat gambar di atas kanvas.
y Tentukan posisi y koordinat gambar di atas kanvas.
width Pilihan. Lebar gambar yang akan digunakan. (Perluas atau kecilkan gambar)
height Pilihan. Tinggi gambar yang akan digunakan. (Perluas atau kecilkan gambar)

Beberapa contoh lainnya

Contoh 2

Tentukan posisi gambar di atas kanvas, lalu tentukan lebar dan tinggi gambar:

Browser Anda tidak mendukung tag HTML5 canvas.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("tulip");
ctx.drawImage(img,10,10,240,160);

Coba Sendiri

Contoh 3

Potong gambar dan tentukan posisi bagian yang dipotong di atas kanvas:

Browser Anda tidak mendukung tag HTML5 canvas.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("scream");
ctx.drawImage(img,90,130,90,80,20,20,90,80);

Coba Sendiri

Contoh 4

Video yang akan digunakan (tekan tombol putar untuk memulai pertunjukan):

Kanvas:

Browser Anda tidak mendukung tag HTML5 canvas.

JavaScript (setiap 20 milidetik, kode akan menggambar bingkai gambar saat ini):

var v=document.getElementById("video1");
var c=document.getElementById("myCanvas");
ctx=c.getContext('2d');
v.addEventListener('play',function() {var i=window.setInterval(function()} 
{ctx.drawImage(v,0,0,270,135)},20);},false);
v.addEventListener('pause',function() {window.clearInterval(i);},false);
v.addEventListener('ended',function() {clearInterval(i);},false);

Coba Sendiri

Dukungan Browser

Angka di tabel menunjukkan versi browser pertama yang mendukung atribut 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>.

Panduan Referensi HTML5 Canvas