Malisa Huzaifa - Web Multimedia HTML6 Canvas & SVG

39 dari kursor. Pada program contoh kita gunakan font dengan ukuran 25px dan jenis font italic. Kemudian kita gunakan addEventListener() yang berfungsi untuk mengendalikan suatu event yang sedang tejadi didalam DOM (Document Object Model). Pada addEventListener()ditambakan instruksi mousemove, function(e). Setelah menggerakkan kursor di canvas maka gunakan getBoundingClientRect() untuk memperoleh nilai x y dari kursor tersebut. Setelah di tangkap posisi dari kursor maka gunakan Math.round(e.clientY – cRect.top); dan Math.round(e.clientX – cRect.top); untuk mengubah info yang didapat dari getBoundingClientRect() menjadi seperti yang ada di canvas. Setelah itu bersihkan pixel yang ada pada canvas dan tampilkan koordinat dari kursor dengan menggunakan ctx.fillText("X: "+canvasX+", Y: "+ canvasY,10,20); dimana canvasX dan canvasY untuk menampilkan titik x,y dari kursor. Agar lebih paham silahkan lihat hasil eksekusi dari program tersebut.

RkJQdWJsaXNoZXIy MTM3NDc5MQ==