42 Baiklah kita akan membahas lebih detail tentang code diatas dimana diawal tag <body> terdapat code yang berfungsi untuk menampilkan gambar menggunakan html dimana gambar ini yang akan kita gunakan kembali pada canvas. Code umum yang digunakan html untuk menampilkan gambar adalah <img id="laptop" width="200" height="200" src="laptopmee.png" alt="Laptop"> dimana kita dapat lihat bahwa ada tag <img> yang digunakan untuk menampilkan gambar, kemudian width & height berfungsi untuk menentukan ukuran gambar yang akan di tampilkan. src pada code berfungsi untuk memanggil gambar yang akan ditampilkan, pada percobaan ini kita gunakan gambar laptopmee.png. Perlu diingat file gambar harus disimpan pada satu folder bersama dengan file .html dan jika tidak maka link gambar yang digunakan harus disesuaikan. Misal kita menyimpan gambar laptopmee.png di lock disk D maka code nya bisa seperti src: ="D:\laptopmee.png". Selanjutnya seperti biasa kita sediakan terlebih dahulu canvas yang akan digunakan untuk menampilkan gambar laptopmee.png. Kemudian kita mulai pada bagian javascrip dimana disini kita gunakan window.onload yang mana ketika program di jalankan maka fungsi pada window.onload akan dieksekusi. Code pada function() sudah dibahas pada bab sebelumnya jadi kita langsung saja code yang digunakan untuk menampilkan gambar di canvas adalah ctx.drawImage(img, 5, 5); yang mana image akan digambar pada canvas mulai dari titik (5,5). Agar lebih mudah dipahami silahkan lihat hasil dari eksekusi programnya pada gambar berikut.
RkJQdWJsaXNoZXIy MTM3NDc5MQ==