캔버스 두 번째 줄 만들기

Question

크기 조정 및 이동식 줄을 만들 수 있습니다. 두 번째 줄을 만들 수 없습니다. 나는 캔버스에 개체를 저장하고 drawImage로 drawagain을 저장해야한다고 생각하지만 그 작업을 수행 할 수 없습니다. 또한 바인딩 해제를 사용합니다.

http://jsfiddle.net/dTs4h/ 그리기 중지

var canvas = document.getElementById('canvas'), 
    c = canvas.getContext('2d'), 
    mouseX = 0, 
    mouseY = 0, 
    width = 700, 
    height = 700, 
    distx = 0, 
    disty = 0, 
    hw = 10, 
    hh = 10; 


canvas.width = width; 
canvas.height = height; 

function draw(x,y) { 


    distx = mouseX - hw; 
    disty = mouseY - hh; 

    c.clearRect(0, 0, width, height); 
    // set the colour 
    c.save(); 
    c.translate(hw, hh); 
    c.beginPath() 
    c.strokeStyle = '#fff'; 
    c.moveTo(x, y); 
    c.lineTo(distx, disty); 
    c.closePath(); 
    c.stroke(); 

    c.closePath(); 
    c.restore();   
    c.save(); 



} 
var abc = true; 
//all browsers 

var click =  $("canvas").bind('click',function(eb){ 
    if(eb.offsetX){ 
    mX = eb.offsetX; 
    mY = eb.offsetY; 
    } else { 
    mX = eb.pageX; 
    mY = eb.pageY; 
    } 
var mousemove = $("canvas").bind('mousemove',function(e){ 
    if(e.offsetX){ 
    mouseX = e.offsetX; 
    mouseY = e.offsetY; 
    } else { 
    mouseX = e.pageX; 
    mouseY = e.pageY; 
    } 
draw(mX,mY); 
}); 
}); 
$("canvas").dblclick(function(){ 
$("canvas").unbind("mouseenter"); 
$("canvas").unbind("mousemove"); 
}); 

나는 두 번째 줄

Answer 1

여기에 주요 문제는 다음입니다 만들기 위해 무엇을해야 :

화면을 새로 고치려면 새로 고침 할 때마다 clearRect를 호출하면 이전 그림이 지워집니다.

이 문제를 해결하는 방법 중 하나는 두 캔버스를 서로 위에 두는 것입니다. 당신은 그 중 하나를 사용하여 미래의 추첨을 추적합니다 (그래서 당신은 이것을 지우지 않아도됩니다, 단지 현재의 라인이 있습니다). 그리고 다른 하나는 사용자가 그것을 만들 때 각 선을 그리는 데 사용됩니다. 이 것은 결코 삭제되지 않습니다. 이 솔루션은 두 개의 캔버스를 사용하는 경우