A New Vue On JavaScript30 - 08 Fun with HTML5 Canvas
Tags: anewvueonjs30, vue, javascript30, javascript
Published: 2019-01-07 17:03:03

---
title: A New Vue On JavaScript30 - 08 Fun with HTML5 Canvas
published: true
tags: ANewVueOnJS30,Vue,JavaScript30,JavaScript
canonical_url: https://davefollett.io/2019/01/06/a-new-vue-on-javascript30-08-fun-with-html5-canvas/
cover_image: https://davefollett.io/2019/01/06/a-new-vue-on-javascript30-08-fun-with-html5-canvas/cover-fun-with-html5-canvas.jpg
series: A New Vue On JavaScript30
---

This article is part of the [A New Vue On JavaScript30](/t/anewvueonjs30) series that explores re-implementing Wes Bos’s ([@wesbos](https://twitter.com/wesbos)) [#JavaScript30](https://JavaScript30.com) projects using [Vue](https://vuejs.org). 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.

![#JavaScript30 Finished Fun with HTML5 Canvas Project](https://davefollett.io/2019/01/06/a-new-vue-on-javascript30-08-fun-with-html5-canvas/js30-fun-with-html5-canvas.gif)

## 🔑 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](https://github.com/davefollett/JavaScript30/blob/master/00%20-%20Getting%20Started/index-VUE.html) from my [getting started](/davefollett/a-new-vue-on-javascript30---getting-started-4o61) article and insert the code from the original #JavaScript30 project into their corresponding Vue locations.

![Animation of inserting #JavaScript30 code into their corresponding Vue locations](https://davefollett.io/2019/01/06/a-new-vue-on-javascript30-08-fun-with-html5-canvas/js30-to-vue-locations.gif)

- 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](https://JavaScript30.com) 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](https://vuejs.org/v2/api/#ref) instead of how [#JavaScript30](https://JavaScript30.com) 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.

{% gist https://gist.github.com/davefollett/9f3cff8d852e709dc2a9122ce6c12110 %}

And finally, I moved the callback handlers for the `mousedown`, `mouseup`, and `mouseout` into functions within Vue’s `methods` section.

{% gist https://gist.github.com/davefollett/10da586458334c3245199087046a029d %}

## 🏁 Putting It All Together

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

{% codesandbox yvyqm83lnz initialpath=08%20-%20Fun%20with%20HTML5%20Canvas%2Findex-VUE.html module=%2F08%20-%20Fun%20with%20HTML5%20Canvas%2Findex-VUE.html %}

Re-implementing this [#JavaScript30](https://JavaScript30.com) project proved to largely reuse the same techniques as the earlier projects, with the exception of using Vue’s special attribute [ref](https://vuejs.org/v2/api/#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](https://github.com/davefollett/JavaScript30/blob/master/08%20-%20Fun%20with%20HTML5%20Canvas/index-FINISHED.html)
- [A New Vue On JavaScript30’s 08 - Fun with HTML5 Canvas](https://github.com/davefollett/JavaScript30/blob/master/08%20-%20Fun%20with%20HTML5%20Canvas/index-VUE.html)

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](https://github.com/davefollett/JavaScript30) of the official [#JavaScript30 GitHub repository](https://github.com/wesbos/JavaScript30) which is located at:

- [https://github.com/davefollett/JavaScript30](https://github.com/davefollett/JavaScript30)

## 🔜 Up Next

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