<style scoped>
#sign {
  border: #6f6f6f 1px solid;
  display: block;
}
</style>

<template>
  <section>
    <h1>手書きサイン入力デモ</h1>
    <canvas id="sign" width="600" height="150" />
    <el-button @click="clear">クリア</el-button>
  </section>
</template>

<script>
export default {
  data() {
    return {
      move: false,
      ox: 0,
      oy: 0,
      x: 0,
      y: 0
    }
  },
  mounted() {
    const canvas = document.querySelector('#sign')
    canvas.addEventListener('touchstart', this.start, false)
    canvas.addEventListener('touchmove', this.draw, false)
    canvas.addEventListener('touchend', this.stop, false)
    canvas.addEventListener('mousedown', this.start, false)
    canvas.addEventListener('mousemove', this.draw, false)
    canvas.addEventListener('mouseup', this.stop, false)
    canvas.addEventListener('mouseout', this.stop, false)

    const context = canvas.getContext('2d')
    context.strokeStyle = '#000000'
    context.lineWidth = 2
    context.lineJoin = 'round'
    context.lineCap = 'round'
  },
  methods: {
    start(event) {
      this.move = true
      const canvas = document.querySelector('#sign')
      this.ox = (event.clientX || event.touches[0].pageX) - canvas.offsetLeft
      this.oy = (event.clientY || event.touches[0].pageY) - canvas.offsetTop
    },
    draw(event) {
      if (this.move) {
        const canvas = document.querySelector('#sign')
        this.x = (event.clientX || event.touches[0].pageX) - canvas.offsetLeft
        this.y = (event.clientY || event.touches[0].pageY) - canvas.offsetTop
        this.drawLine()
        this.ox = this.x
        this.oy = this.y
      }
    },
    stop(event) {
      this.move = false
    },
    drawLine() {
      const canvas = document.querySelector('#sign')
      const context = canvas.getContext('2d')
      context.beginPath()
      context.moveTo(this.ox, this.oy)
      context.lineTo(this.x, this.y)
      context.stroke()
      context.closePath()
    },
    clear() {
      const canvas = document.querySelector('#sign')
      const context = canvas.getContext('2d')
      context.fillStyle = '#ffffff'
      context.fillRect(0, 0, canvas.width, canvas.height)
    }
  }
}
</script>