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，但是不加的话，会显示所有绘制路径），怎么能在绘制下一条的时候不擦除之前绘制的线条呢？