vue canvas

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="style.css">
  <script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.0.5/vue.min.js"></script>
</head>
<body>
  <h1>Hello Plunker!</h1>
  <div id="app">
    <canvas width="300" height="300" class="canvas" @mousedown="draw_activate()" @mousemove="get_current_position($event)" @mouseup="draw_deactivate()">
    </canvas>
  </div>
  <script src="script.js"></script>
  </body>
</html>



var app = new Vue({
  el: "#app",
  data: function() {
    return {
      last_draw_x: null,
      last_draw_y: null,
      current_x: null,
      current_y: null,
      draw_enable: true
    }
  },
  methods: {
    draw_activate() {
      document.addEventListener("mousemove", this.draw);
    },
    draw_deactivate() {
      document.removeEventListener("mousemove", this.draw);
    },
    get_current_position(event) {
      var newx = event.offsetX;
      var newy = event.offsetY;
      this.current_x = newx;
      this.current_y = newy;
    },
    draw() {
      if (this.draw_enable)
      {
        if (this.last_draw_x == null || this.last_draw_y == null)
        {
          this.last_draw_x = this.current_x;
          this.last_draw_y = this.current_y;
        }
        else
        {
          this.draw_core(this.last_draw_x, this.last_draw_y,this.current_x,this.current_y);
          this.last_draw_x = this.current_x;
          this.last_draw_y = this.current_y;
        }
      }
    },
    draw_core(x, y, nx, ny) {
      this.ctx.beginPath();
      this.ctx.moveTo(x, y);
      this.ctx.lineTo(nx, ny);
      this.ctx.stroke();
    }
  },
  mounted() {
    let canvas = this.$el.getElementsByTagName('canvas')[0]
    this.ctx = canvas.getContext('2d')
  }
})

/* Styles go here */

.canvas {
  border: 1px solid #000000;
}