HTML5 Canvas - 이미지 배경 위에 선을 그리는 방법?

Question

HTML5 캔버스에서 이미지 배경 위에 선을 그리려합니다. 그러나 항상 이미지 뒤에 선이 그려집니다. 실제로 함수를 호출하는 방법과 관계없이 선이 먼저 그려지고 그림이 그려집니다.

어떻게하면 이미지를 맨 위에 올릴 수 있습니까?

var canvas = document.getElementById("myCanvas"); 
     var context = canvas.getContext("2d"); 
      context.clearRect(0, 0, canvas.width, canvas.height); 
drawbackground(canvas, context); 
drawlines(canvas, context); 


function drawbackground(canvas, context){ 

    var imagePaper = new Image(); 


     imagePaper.onload = function(){ 


      context.drawImage(imagePaper,100, 20, 500,500); 
     }; 

     imagePaper.src = "images/main_timerand3papers.png"; 
} 



function drawlines(canvas, context){ 


      context.beginPath(); 
      context.moveTo(188, 130); 
      context.bezierCurveTo(140, 10, 388, 10, 388, 170); 
      context.lineWidth = 10; 
      // line color 
      context.strokeStyle = "black"; 
      context.stroke(); 
} 

Answer 1

완전히 테스트되지 않은 코드이지만 다음과 같이 시도 했습니까?

function drawbackground(canvas, context, onload){ 

    var imagePaper = new Image(); 


     imagePaper.onload = function(){ 


      context.drawImage(imagePaper,100, 20, 500,500); 
      onload(canvas, context); 
     }; 

     imagePaper.src = "images/main_timerand3papers.png"; 
} 

다음과 같이 메서드를 호출 ...

drawbackground(canvas, context, drawlines); 

Answer 2

은 이런 식으로 이미지 온로드를 변경

:

다음

imagePaper.onload = function() { 
    context.drawImage(imagePaper, 100, 20, 500, 500); 
    drawLines(canvas, context); 
}; 

당신이 drawLines에 이전 호출을 제거해야합니다 .

이 솔루션을 중요하게 생각하면 drawLines 함수가 즉시 실행되는 반면 onload 함수는 언젠가 나중에 실행됩니다. 콜백을 구조화하는 방법, 특히 중첩 할 때 항상주의해야합니다.

Answer 3

이 선이나 선을 여러 번 다시 그리면보다 효율적으로 캔버스의 CSS background-image을 이미지로 설정할 수 있습니다.

<canvas style="background-image:url('images/main_timerand3papers.png');"></canvas> 

Answer 4

또는 당신이 시도 할 수 있습니다 :

drawbackground(canvas, context); 
context.globalCompositeOperation = 'destination-atop'; 
drawlines(canvas, context);