There is a toolbox in the middle of the screen, as a Paint emulator. Below the box you can see buttons related to the possibilities of change the color and the size of the draw up.
The elements selected related with the size, color are similiar in each case. There is an event listener which is waiting the click button. But, what happen with the canvas?
The canvas have event listener as you can see in the following section of the code
canvas.addEventListener('mousedown', (e) => { isPressed = true x = e.offsetX y = e.offsetY})canvas.addEventListener('mouseup', (e) => { isPressed = false x = undefined y = undefined})canvas.addEventListener('mousemove', (e) => { if(isPressed){ const x2 = e.offsetX const y2 = e.offsetY drawCircle(x2, y2) drawLine(x, y, x2, y2) x = x2 y = y2 }})If the button is pressed you will draw a line.
You can see the code in this GitHub Repository: 22.drawing_app and the demo of the project is here: Drawing App