Lab 21 Reflection

     Lab 21 was about creating an HTML canvas the user could draw on. In the HTML, the only thing we needed to do was to set up the <canvas> tags and specify a height and width attribute. In the JS, we made the canvas work by first by specifying how we wanted the lines drawn to look like. This involved ctx, or the JS way to refer to the line, and specifying properties like ctx.lineCap = "round". Then we created a variable, isDrawing, and set it equal to false. A function called draw was created and was to be called when the user clicked down on the mouse and drew, taking in the parameter e for event and setting the variable isDrawing to true, a key step in allowing the user to draw on the canvas. Finally, using .addEventListener(), an event listener was added to the canvas itself and would be fired whenever the user clicked down on the mouse and called the function draw(e) to allow the user to draw on the canvas. In code, it looks like canvas.addEventListener('mousemove', draw); .
     These skills are important to a web designer because they help program a website's interactivity efficiently. Usually, we would put onClicks in the HTML to fire off certain JS functions when a particular element was clicked, however, always having to put onClicks can be tedious and reduces the events after which a function can fire off to only clicks. Using .addEventListener is a bit less tedious and broadens the types of events, such as mousemove. It expands the ways you can make a website interactive all while making it efficient to do so.