Canvas中如何用鼠标绘制出多条直线？

Question

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

var moveX,
    moveY,
    toX,
    toY

canvas.addEventListener('mousedown', function (e) {
    moveX = e.clientX
    moveY = e.clientY
    canvas.addEventListener('mousemove', drawLine)
})
canvas.addEventListener('mouseup', function (e) {
    canvas.removeEventListener('mousemove', drawLine)
})

function drawLine(e) {
    toX = e.clientX
    toY = e.clientY
    ctx.clearRect(0, 0, 600, 400)
    ctx.beginPath()
    ctx.moveTo(moveX, moveY)
    ctx.lineTo(toX, toY)
    ctx.closePath()
    ctx.stroke()
}

以上代码可以用鼠标绘制一条直线（鼠标按下，开始绘制，鼠标移动时，显示绘制路径，鼠标抬起，结束绘制），但是这样只能绘制一条（因为代码中加入了clearRect，但是不加的话，会显示所有绘制路径），怎么能在绘制下一条的时候不擦除之前绘制的线条呢？

Answer 1

在鼠标绘制之后、根据鼠标绘制的直线、拓展一个数组、每次clear之后要重新绘制这个数组里的对象、

相当于在前台做记录了

Answer 2

用数组把每个起止坐标记录下来

// 瞎写一段, 假设(x, y)的鼠标所在的坐标
var points = [];
points.push({
  x: x,
  y: y
});

canvas.clearRect(width, height);
points.forEach(function(point, i) {
  i === 0 ? canvas.moveTo(point.x, point.y) : canvas.lineTo(point.x, point.y);
});
canvas.stroke();