HTML5キャンバス - 画像の背景に線を描くにはどうすればいいですか？

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

はこのような何かにあなたのイメージのonloadを変更

：

その後

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

あなたはdrawLinesに以前の呼び出しを削除することを確認してください。

このソリューションの重要な点は、将来はいつでもonload関数が実行され、drawLines関数はすぐに実行されるということです。コールバックをどのように構造化するか、特に入れ子にするときは、常に注意する必要があります。

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);