HTML5 Canvas - Come disegnare una linea su uno sfondo di un'immagine?

Question

Sto provando a disegnare una linea su uno sfondo di immagine - in una tela HTML5. Tuttavia, sempre la linea viene disegnata dietro l'immagine. In realtà la linea viene disegnata per prima e poi le immagini vengono disegnate - indipendentemente da come le chiamo funzioni.

Come si porta la linea in cima all'immagine?

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

Codice completamente non testato, ma hai provato qualcosa di simile?

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

e quindi chiamare il metodo come questo ...

drawbackground(canvas, context, drawlines); 

Answer 2

Cambia la tua immagine onload a qualcosa di simile:

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

quindi assicurarsi di rimuovere il precedente chiamata a drawLines .

La soluzione importante per questa soluzione è che la funzione onload verrà eseguita in futuro, mentre la funzione drawLines viene eseguita immediatamente. Devi sempre stare attento a come strutturi i tuoi callback, specialmente quando li annidi.

Answer 3

Per essere più efficiente, supponendo che si stiano eseguendo più ridisegni di questa linea o linee, sarebbe necessario impostare il CSS background-image dell'area di disegno come immagine.

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

Answer 4

Oppure si può provare questo:

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