如何停止此代碼中的多行創建？

Question

如何更新此代碼以僅在兩個點擊事件之間畫線？我的意思是，如何爲新的點擊次數設置新的起點並停止創建Poly-line？你能否也請幫我把這條線保留在一個Mouse-down和-Up事件中而不是Click事件中？

Here is the Web Sample

和下面是代碼

var needFirstPoint = true; 
function drawNextLine(ctx, x, y) { 
if (needFirstPoint) { 
    ctx.lineWidth = 5; 
    ctx.beginPath(); 
    ctx.moveTo(x, y); 
    needFirstPoint = false; 
} 
else { 
    ctx.lineTo(x, y); 
    ctx.stroke(); 
} 
} 
    $(document).ready(function(){ 
    var canvas = $('#myCanvas').get(0); 
    if (!canvas.getContext) { return; } 
    var ctx = canvas.getContext('2d'); 

    $('#myCanvas').on('click', function(e){ 
    var offset = $(this).offset(); 
    var x = e.pageX - offset.left; 
    var y = e.pageY - offset.top; 
    drawNextLine(ctx, x, y); 
    }); 
}); 

Answer 1

這不是超流體，所以你可能需要更多的與它玩，但這個工作對我來說：

else { 
    ctx.lineTo(x, y); 
    ctx.stroke(); 
    needFirstPoint = true; 
} 

Answer 2

我曾經寫過一個類似的功能http://www.kolchose.org/simon/ajaximagemapcreator/，我用雙擊停止畫布繪製。