SOURCE

var cas = document.querySelector('canvas')
var ctx = cas.getContext('2d')

var isDraw = false
// 鼠标按下事件
cas.addEventListener('mousedown', function () {
  isDraw = true
  ctx.beginPath()
})

// 鼠标移动事件
cas.addEventListener('mousemove', function (e) {
  if (!isDraw) {
    // 没有按下
    return
  }
  // 获取相对于容器内的坐标
  var x = e.offsetX
  var y = e.offsetY
  ctx.lineTo(x, y)
  ctx.stroke()
})

cas.addEventListener('mouseup', function () {
  // 关闭开关了!
  isDraw = false
})

<canvas width="200" height="200"></canvas>