캔버스에 이미지와 스케치를 함께 그리는 방법

Question

캔버스에 이미지를 그린 다음 sketch.js로 이미지를 스케치 할 수 있습니다. 지금 상황은 다음과 같습니다

1.the image has been drawn on the canvas successfully 
    2. but when my mouse over the canvas, then image disappeared, and the canvas shows empty 
    3. when I dragged the mouse, some sketch shows on the empty canvas(the sketch looks correct) 

그래서, 나는 두 함수를 잘했습니다,하지만 난 사이에있는 부분에 대한 혼란 스러워요. 캔버스에 이미지가있는 스케치를 그릴 수 있기를 바랍니다.

index.html을 :

<canvas id="mysketch" width="578" height="400" style="margin: 0px; "></canvas> 

canvas.js : 여기 내 코드입니다

var mysketch = jQuery("#mysketch"); 

// draw the captured image to canvas 
    var displayImage = function() { 
    var context = mysketch.get(0).getContext("2d");  
     var image = new Image(); 

     image.onload = function() { 
      context.drawImage(image, 0, 0); 
     } 

    // prepend the required image info again 
     image.src = dataURL; 

     // call sketch.js to draw sketch on the canvas 
    mysketch.sketch({defaultColor: "#ff0"}); 

    } 

Answer 1

나는, 스케치 방법
sketch.js에 전화에 캔버스를 청소하고 있다고 생각 처음에는 그 위에 무언가를 그릴 수 있습니다.
링크 here에서 볼 수 있듯이 세 번째 예 (즉, 도구 예제)에서 이미지는 drawImage 메소드로 그려지지 않습니다.
실제로 캔버스 배경을 배경으로 항상 그 위에 그려 놓을 캔버스의 배경입니다.

그래서 당신이 할 수있는 것입니다 :

단지 같은 너비, 높이와 동일에 캔버스 뒤에 새로운 캔버스를 배경으로 이미지를 설정 즉, 예에서와 같이

을 같은 일을 또는 확인 중 위치를 확인하고 이미지를 그릴 수 있습니다. 그리고 두 번째 스케치 일을해라.