A New Vue On JavaScript30 - 08 Fun with HTML5 Canvas

This article is part of the A New Vue On JavaScript30 series that explores re-implementing Wes Bos’s (@wesbos) #JavaScript30 projects using Vue. Today I will be working with #JavaScript30’s 08 Fun with HTML5 Canvas project. This project uses a <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.

🔑 Vue Concepts

• The mounted lifecycle hook
• Event binding
• Methods
• Special attribute - ref

🏗️ Vue Implementation

The first step is the same as my other articles, grab the base starter file from my getting started article and insert the code from the original #JavaScript30 project into their corresponding Vue locations.

• The HTML section was placed inside the root <div id="app">
• The cxt, isDrawing, lastX, lastY, hue, and direction variables were placed into the data section
• The draw() function was placed into the methods section
• The JavaScript that executed upon page load was placed into the mounted function
• The computed and watch sections were not needed and removed
• The <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 <canvas> element. In the #JavaScript30 version, the events for mousedown, mousemove, mouseup, and 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 @mousedown, @mousemove, @mouseup, and @mouseout. Note that I am using Vue’s shorthand notation for event binding instead of v-on.

Then, to get a reference to the <canvas> element, I used Vue’s special attribute ref instead of how #JavaScript30 used document.querySelector('#draw'). By setting a ref of 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 mousedown, mouseup, and mouseout into functions within Vue’s methods section.

🏁 Putting It All Together

Click and drag in the CodeSandbox below to see the project in action.

Re-implementing this #JavaScript30 project proved to largely reuse the same techniques as the earlier projects, with the exception of using Vue’s special attribute ref. Even so, I feel that it continues to show how versatile Vue is and I had fun coding it.

Here are links to the #JavaScript30 version and my Vue version:

• #JavaScript30’s 08 - Fun with HTML5 Canvas
• A New Vue On JavaScript30’s 08 - Fun with HTML5 Canvas

I hope you enjoyed this article. Feel free to message me with any questions, comments, or corrections. All code presented within this series is available in my fork of the official #JavaScript30 GitHub repository which is located at:

• https://github.com/davefollett/JavaScript30

🔜 Up Next

Next in the A New Vue On JavaScript30 series will be #JavaScript30’s “10 - Hold Shift and Check Checkboxes” project. I’ll add a link here when it’s published.