Page({
  onShareAppMessage() {
    return {
      title: 'canvas',
      path: 'pages/component/canvas/canvas'
    }
  },
  onReady() {
    this.position = {
      x: 150,
      y: 150,
      vx: 2,
      vy: 2
    }
    this.drawBall()
    this.interval = setInterval(this.drawBall, 17)
    this.drawImage()
    this.drawImageHidpi()
  },

  drawBall() {
    const p = this.position
    p.x += p.vx
    p.y += p.vy
    if (p.x >= 300) {
      p.vx = -2
    }
    if (p.x <= 7) {
      p.vx = 2
    }
    if (p.y >= 300) {
      p.vy = -2
    }
    if (p.y <= 7) {
      p.vy = 2
    }

    const context = wx.createCanvasContext('canvas')

    function ball(x, y) {
      context.beginPath(0)
      context.arc(x, y, 5, 0, Math.PI * 2)
      context.setFillStyle('#1aad19')
      context.setStrokeStyle('rgba(1,1,1,0)')
      context.fill()
      context.stroke()
    }

    ball(p.x, 150)
    ball(150, p.y)
    ball(300 - p.x, 150)
    ball(150, 300 - p.y)
    ball(p.x, p.y)
    ball(300 - p.x, 300 - p.y)
    ball(p.x, 300 - p.y)
    ball(300 - p.x, p.y)
    context.draw()
  },

  drawImage() {
    const context = wx.createCanvasContext('canvas2')
    context.drawImage('./car.png', 0, 0)
    context.draw()
  },

  drawImageHidpi() {
    const context = wx.createCanvasContext('canvas3')
    context.drawImage('./car.png', 0, 0)
    context.draw()
  },

  onUnload() {
    clearInterval(this.interval)
  }
})