Step 5: Draw on the canvas when the user holds down the
mouse, moves it around, and releases it.
Hint: Use the
beginPath,
lineTo,
stroke, and
closePath
methods:
// create a context variable that will be used below
let context = yourCanvasVariable.getContext(`2d`)
function startDrawing() {
// start a new line
context.beginPath()
}
function draw(event) {
// get the mouse coordinates relative to the box
let x = event.offsetX
let y = event.offsetY
// move the pen to the mouse coordinates
context.lineTo(x, y)
// draw a line
context.stroke()
}
function stopDrawing() {
// end the line
context.closePath()
}