vue lineto

<!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>
    <v-app id="app">
    <v-container>
      <v-layout justify-center wrap>
        <v-flex xs10 md5 sm5 pa-1>
          <v-layout justify-center colmn wrap>
            <v-flex xs12 class="flex-center">
              <div class="content">
                <canvas width="128" height="128" ref="canvas"
                  @mousemove="canvasMouseMove"
                  @touchmove.stop="canvasMouseMove"
                  @touchend.stop="offedit"
                  @mouseup="offedit"
                  @touchstart.prevent="onedit"
                  @mousedown="onedit"></canvas>
              </div>
            </v-flex>
            <v-flex xs12 class="flex-center">
              <v-btn depressed color="primary" @click="resetCanvas">Reset</v-btn>
            </v-flex>
          </v-layout>
        </v-flex>
      </v-layout>
    </v-container>
  </v-app>
  <script src="script.js"></script>
  </body>
</html>



var app = new Vue({
  el: "#app",
  data() {
    return {
      output: [],
      edit: false,
      lastPosX: null,
      lastPosY: null,
      downLoadPercent: 0,
      isDownLoaded: false,
      graphModel: null
    }
  },
  mounted() {
    this.resetCanvas();
    window.addEventListener('mouseup', this.offedit);
    this.isDownLoaded = true
  },
  methods: {
    canvasMouseMove(event) {
      if (!this.edit)
      {
        return
      }
      let clientRect = event.target.getBoundingClientRect();
      let x = ((event.clientX || event.touches[0].clientX) - clientRect.left) * 128 / event.target.offsetWidth;
      let y = ((event.clientY || event.touches[0].clientY) - clientRect.top ) * 128 / event.target.offsetHeight;
      this.lastPosX = this.lastPosX || x
      this.lastPosY = this.lastPosY || y
      let canvas = this.$refs['canvas']
      let ctx = canvas.getContext("2d");
      ctx.shadowColor = "white";
      ctx.shadowBlur = 1.5
      ctx.strokeStyle = "white";
      ctx.lineWidth = 2
      ctx.lineCap = "round";
      ctx.beginPath();
      ctx.moveTo(this.lastPosX, this.lastPosY);
      ctx.lineTo(x, y);
      ctx.stroke();
      ctx.closePath();
      this.lastPosX = x
      this.lastPosY = y
    },
    resetCanvas() {
      let canvas = this.$refs['canvas']
      var ctx = canvas.getContext("2d");
      ctx.fillStyle = "black";
      ctx.fillRect(0, 0, canvas.width, canvas.height);
      this.output = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0].map(v=>v.toFixed(10))
    },
    onedit(event) {
      this.edit = true
    },
    offedit() {
      if (!this.edit)
      {
        return
      }
      this.edit = false
      this.lastPosX = null
      this.lastPosY = null
    },
  },
})

/* Styles go here */

#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
  &.column {
    flex-direction: column;
    flex-wrap: wrap;
 }
}
.content {
  position: relative;
  width:  100%;
  height: 100%;
  & > * {
    width:  100%;
    height: 100%;
  }
  & svg, & .circular {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }
  & svg {
    pointer-events : none;
  }
  & .circular {
    background-color: rgba(255,255,255,0.9);
  }
}