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".
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>
<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>