diff --git a/canvas-10-feb/src/components/HelloWorld.vue b/canvas-10-feb/src/components/HelloWorld.vue
index 8743f802f5ca72e80829e342776a1da6bd1cba35..1e88dd32a094559be004ca515cc753f1837cc1f1 100644
--- a/canvas-10-feb/src/components/HelloWorld.vue
+++ b/canvas-10-feb/src/components/HelloWorld.vue
@@ -1,6 +1,6 @@
 <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)
     }
diff --git a/canvas-10-feb/src/components/mixins/draw.js b/canvas-10-feb/src/components/mixins/draw.js
new file mode 100644
index 0000000000000000000000000000000000000000..5f028039657d941714af031fdddcd04cfd76469b
--- /dev/null
+++ b/canvas-10-feb/src/components/mixins/draw.js
@@ -0,0 +1,30 @@
+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)
+    }
+  }
+}
diff --git a/canvas-10-feb/src/views/Home.vue b/canvas-10-feb/src/views/Home.vue
index 17f2749b30308dee224c6d15f9b0e9b8ea3ce5bf..540323e6284460c96767bc6f8efac7ea1b18f0d7 100644
--- a/canvas-10-feb/src/views/Home.vue
+++ b/canvas-10-feb/src/views/Home.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="home">
-    <HelloWorld msg="Welcome to Vue &amp; Canvas testing ground" />
+    <HelloWorld />
   </div>
 </template>