Selain dengan menampilkan semua bagian foto, kita juga bisa
menampilkan sebagian potongan dari satu foto yang utuh. Misalnya, kita
punya gambar seperti ini.
Jika kita menggabungkan dengan perulangan, kita bisa menampilkan potongan-potongan dari satu gambar dengan pola tertentu.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<canvas width="640" Height="640" id="kanvas" style="background-color:pink;border:1px black solid">
Canvas tidak dapat ditampilkan
</canvas>
<script>
var kanvas=document.getElementById("kanvas");
var ct=kanvas.getContext("2d");
var gambar=new Image();
gambar.src="coba.png";
gambar.onload=function(){
var n=2;
var i, panjang=gambar.width/n, tinggi=gambar.height/n;
ct.drawImage(gambar, panjang, 0, panjang, tinggi, panjang, 0, panjang, tinggi);
}
</script>
</body>
</html>
Method
drawImage bisa digunakan dengan 3, 5 atau 9 argumen. Jika menggunakan 8
argumen, argumen ke-2 sampai dengan ke-5 menunjukkan bagian dan ukuran
dari gambar yang akan kita tampilkan, sedangkan arguman ke-6 hingga yang
terakhir menunjukkan letak dan ukuran dari gambar yang ditampilkan di
canvas. Hasil dari kode HTML dan javascript di atas adalah seperti di
bawah ini.Jika kita menggabungkan dengan perulangan, kita bisa menampilkan potongan-potongan dari satu gambar dengan pola tertentu.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<canvas width="640" Height="640" id="kanvas" style="background-color:pink;border:1px black solid">
Canvas tidak dapat ditampilkan
</canvas>
<script>
var kanvas=document.getElementById("kanvas");
var ct=kanvas.getContext("2d");
var gambar=new Image();
gambar.src="coba.png";
gambar.onload=function(){
var n=4;
var i, panjang=gambar.width/n, tinggi=gambar.height;
for (i=0;i<n;i++)
ct.drawImage(gambar, i*panjang, 0, panjang, tinggi, (n-i-1)*panjang, 0, panjang, tinggi);
}
</script>
</body>
</html>