Canvas HTML5: ¿cómo dibujar una línea sobre un fondo de imagen?

Question

Estoy tratando de trazar una línea sobre un fondo de imagen, en un lienzo HTML5. Sin embargo, siempre la línea se dibuja detrás de la imagen. En realidad, la línea se dibuja primero y luego las imágenes se dibujan, independientemente de cómo llamo a las funciones.

¿Cómo llevo la línea a la parte superior de la imagen?

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

Código totalmente no probado, pero ¿ha intentado algo como esto?

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"; 
} 

y luego llamar al método como este ...

drawbackground(canvas, context, drawlines); 

Answer 2

Cambiar la imagen para onload algo como esto:

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

a continuación, asegúrese de retirar la llamada anterior a drawLines .

Lo importante para esta solución es que la función onload se ejecutará en el futuro, mientras que la función drawLines se ejecuta inmediatamente. Siempre debe tener cuidado con la estructura de sus devoluciones de llamadas, especialmente al anidarlas.

Answer 3

Para ser más eficiente, suponiendo que va a hacer múltiples rediseños de esta línea o líneas, sería establecer el CSS background-image del lienzo para que sea su imagen.

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

Answer 4

O puede probar esto:

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