99 Pada setiap event tersebut terdapat tiga fungsi yang digunakan, dimana pada bagian pertama adalah function start(event){..} terdapat proses mengubah nilai is_drawing = true; kemudian mulai menggambar dengan context.beginPath(); dan context.moveTo (event.clientX - canvas.offsetLeft, event.clientY - canvas.offsetTop); serta event.preventDefault();. Fungsi kedua adalah function draw(event){..} yang akan ada aksi jika terpenuhi if (is_drawing){..} dimana akan ada proses menampilkan gambar yang dibuat dengan menentukan line dengan tag context.lineTo(event.clientX - canvas.offsetLeft, event.clientY - canvas.offsetTop); dengan menampilkan warna dari gambar yang dibuat dengan tag context.strokeStyle = draw_color; ontext.lineWidth = draw_width; context.lineCap = "round"; context.lineJoin = "round"; context.stroke(); dan terakhir ditutup dengan code event.preventDefault();. Fungsi ketiga yang digunakan adalah bagian function stop(event){..} yang berisikan if (is_drawing){..} jika terpenuhi maka akan ada proses context.stroke(); dan context.closePath(); serta bagian is_drawing = false; kemudian ditutup dengan tag event.preventDefault();. Berikut ini adalah hasil ouput dari program yang kita bahas. Pada canvas yang begaris pinggit merah ini kita bisa menulis apapun didalamnya asalah posisi mouse ketika diklik berada di sekitaran canvas. Jika mouse di klik pada bagian luar canvas maka kita tidak akan bisa menggambar pada canvas. Agar lebih jelas silahkan cobakan program ini.
RkJQdWJsaXNoZXIy MTM3NDc5MQ==