<canvas> element to provide a fun a way to draw in the browser window by clicking and dragging the mouse. As you draw, the line will get larger and smaller as well as change color. Here is an animated gif of it in action.
- Event binding
- Special attribute - ref
- The HTML section was placed inside the root
directionvariables were placed into the
draw()function was placed into the
watchsections were not needed and removed
<style>section was moved into my Vue version unchanged
This time around the “Getting Started” steps were nearly all that needed to be done, but we still have a few things left to do. First, we need to handle the events on the
mouseout were setup with
addEventListener() function calls. For the Vue version, I attached the events directly onto the
<canvas> element using Vue event bindings of
@mouseout. Note that I am using Vue’s shorthand notation for event binding instead of
Then, to get a reference to the
document.querySelector('#draw'). By setting a
myCanvas on the html
<canvas> element, I’m able to directly access it later as
this.$refs.myCanvas. This completed the HTML section as shown in the below gist.
And finally, I moved the callback handlers for the
mouseout into functions within Vue’s
Click and drag in the CodeSandbox below to see the project in action.