Memotong Gambar dalam Canvas ~ Pemrograman dan Teknologi

Selain dengan menampilkan semua bagian foto, kita juga bisa menampilkan sebagian potongan dari satu foto yang utuh. Misalnya, kita punya gambar seperti ini.

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