mixin

moved the drawing of boxes into a mixin.js as proof of approach to use mixins for rendering canvas2d

canvas-10-feb/src/components/HelloWorld.vue

 <template>
   <div class="hello">
-    <h1>{{ msg }}</h1>
+    <h1>Welcome to Vue &amp; Canvas testing ground</h1>
 
     <canvas ref="canvas"></canvas>
 
@@ -21,13 +21,12 @@
 
 <script>
 import { mapState } from 'vuex'
+import { draw } from './mixins/draw.js'
 var canvas = null
 
 export default {
   name: 'HelloWorld',
-  props: {
-    msg: String
-  },
+  mixins: [draw],
 
   computed: mapState({
     configRect: state => state.configRect,
@@ -40,33 +39,6 @@ export default {
     this.draw()
   },
   methods: {
-    draw() {
-      this.box(this.ctx, this.x, this.y)
-    },
-
-    box(ctx, x, y) {
-      ctx.setTransform(1, 0, 0, 1, x, y)
-
-      ctx.fillStyle = this.configRect.fill
-      ctx.fillRect(
-        this.configRect.x,
-        this.configRect.y,
-        this.configRect.height,
-        this.configRect.width
-      )
-
-      ctx.fillStyle = this.configHandle.fill
-      ctx.fillRect(
-        this.configHandle.x,
-        this.configHandle.y,
-        this.configHandle.height,
-        this.configHandle.width
-      )
-
-      ctx.stroke()
-      ctx.setTransform(1, 0, 0, 1, 0, 0)
-    },
-
     clear(ctx) {
       ctx.clearRect(0, 0, canvas.width, canvas.height)
     }

canvas-10-feb/src/components/mixins/draw.js

+export const draw = {
+  methods: {
+    draw() {
+      this.box(this.ctx, this.x, this.y)
+    },
+
+    box(ctx, x, y) {
+      ctx.setTransform(1, 0, 0, 1, x, y)
+
+      ctx.fillStyle = this.configRect.fill
+      ctx.fillRect(
+        this.configRect.x,
+        this.configRect.y,
+        this.configRect.height,
+        this.configRect.width
+      )
+
+      ctx.fillStyle = this.configHandle.fill
+      ctx.fillRect(
+        this.configHandle.x,
+        this.configHandle.y,
+        this.configHandle.height,
+        this.configHandle.width
+      )
+
+      ctx.stroke()
+      ctx.setTransform(1, 0, 0, 1, 0, 0)
+    }
+  }
+}

canvas-10-feb/src/views/Home.vue

 <template>
   <div class="home">
-    <HelloWorld msg="Welcome to Vue &amp; Canvas testing ground" />
+    <HelloWorld />
   </div>
 </template>