Foto dalam Canvas ~ Pemrograman dan Teknologi

Untuk menampilkan foto dalam kanvas, kita bisa menggunakan drawImage. Gambar yang berasal dari tag <img> atau bisa juga didapat dengan new Image(). Gambar tersebut baru akan bisa ditampilkan setelah selesai "dimuat". Untuk mengetahui apakah gambar dimuat atau belum, kita bisa menggunakan event "onload".

<!DOCTYPE html> 
<html>
<head>
</head>
<body>
    <img src="coba.png" id="gambar" hidden>
    <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=document.getElementById("gambar");
        gambar.onload=function(){
            ct.drawImage(gambar, 50, 50);
        }
    </script>
</body>
</html>

Pada contoh di atas, kita menggunakan getElementById untuk mendapatkan gambar dari tag <img> yang "disembunyikan". Selain menggunakan tag <img> untuk menyimpan gambar yang akan ditampilkan ke <canvas>, kita bisa juga menggunakan "new Image()" tanpa tag <img> seperti contoh di bawah 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(){
            ct.drawImage(gambar, 0, 0);
        }
    </script>
</body>
</html>

Dengan cara apapun gambar didapat, kita harus memastikan bahwa gambarnya sudah diload. Ingat juga, bahwa gambar atau file apapun yang akan kita gunakan dalam kode HTML harus diletakkan di folder yang sama dengan kode HTML-nya kecuali kita menyertakan nama foldernya dalam alamat yang "relatif".

Method drawImage mempunyai beberapa parameter. Pada contoh di atas, parameter yang kita gunakan hanya posisi x dan y. Selain menggunakan 2 argumen untuk drawImage, kita bisa juga menggunakan 4 argumen dengan argumen ke-3 dan ke-4 yang secara berturut, turut merupakan lebar dan tinggi dari "gambar yang terlihat".

<!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(){
            ct.drawImage(gambar, 0, 0, 400, 800);
        }
    </script>
</body>
</html>