98 memilih elemen pada HTML dan let context = canvas.getContext("2d"); digunakan untuk membuat sebuah object dengan nama ctx yang nantinya akan kita gunakan untuk menggambar. Selanjutnya kita memberikan warna pada isi canvas dengan menggunakan context.fillStyle = "white"; dan context.fillRect(0, 0, canvas.width, canvas.height); dimana isi canvas kita setting berwarna putih. Langkah berikutnya adalah menentukan warna yang akan dihasilkan pada canvas ketika kita menggambar menggunakan mouse. Pada program kita gunakan warna hitam dengan ukuran 2px dengan menggunakan tag let draw_color= "black" dan let draw_width= "2"; serta kita set ketika program di run kan mouse tidak di klik maka canvas akan tetap posisi kosong dengan menambahkan tag let is_drawing= false;. Kemudian kita menambahkan event ketika ada interaksi yg terjadi dari mouse yang diklik kiri pada canvas dengan menggunakan code canvas.addEventListener("touchstart", start, false); canvas.addEventListener("touchmove", draw, false); canvas.addEventListener("mousedown", start, false); canvas.addEventListener("mousemove", draw, false); dan proses menggambar akan terhenti ketika tag canvas.addEventListener("touchend", stop, false); canvas.addEventListener("mouseup", stop, false); canvas.addEventListener("mouseout", stop, false); dilakukan.
RkJQdWJsaXNoZXIy MTM3NDc5MQ==