एचटीएमएल 5 कैनवास - छवि पृष्ठभूमि पर एक रेखा कैसे आकर्षित करें?

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 को पहले कॉल अवश्य निकाल दें ।

महत्वपूर्ण इस समाधान को दूर लेना, यह है कि onload फ़ंक्शन भविष्य में कभी-कभी निष्पादित किया जाएगा, जबकि ड्रॉलाइन फ़ंक्शन तुरंत निष्पादित किया जाएगा। आपको हमेशा सावधान रहना चाहिए कि आप अपनी कॉलबैक कैसे बनाते हैं, खासकर जब उन्हें घोंसला करते हैं।

Answer 3

अधिक कुशल होने के लिए, यह मानते हुए कि आप इस पंक्ति या रेखाओं के एकाधिक रेड्रो करने जा रहे हैं, तो कैनवास के सीएसएस background-image को अपनी छवि होने के लिए सेट करना होगा।

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

Answer 4

या आप यह कोशिश कर सकते हैं:

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