एचटीएमएल 5 कैनवास में छवि के शीर्ष पर पाठ कैसे लिखें?

Question

मैं कैनवास पर एक छवि प्रदर्शित करना चाहता हूं और उस छवि के शीर्ष पर एक टेक्स्ट डालना चाहता हूं।

window.onload = function() { 
    var canvas = document.getElementById("myCanvas"); 
    var context = canvas.getContext("2d"); 
    var imageObj = new Image(); 

    imageObj.onload = function() { 
     context.drawImage(imageObj, 10, 10); 
    }; 

    imageObj.src = "darth-vader.jpg"; 
    context.font = "40pt Calibri"; 
    context.fillText("My TEXT!", 20, 20); 
}; 

मुझे यहां पर केवल एक छवि मिल रही है लेकिन पाठ नहीं; पाठ छवि के पीछे है। छवि के शीर्ष पर पाठ कैसे सम्मिलित करें?

Answer 1

ऐसा इसलिए है क्योंकि आप छवि लोड होने से पहले टेक्स्ट खींचते हैं और खींचे जाते हैं। छवि को खींचा जाने के बाद आपको उस पाठ को आकर्षित करना होगा जो छवि के शीर्ष पर होना चाहिए। बजाय इस कोड का प्रयास करें:

window.onload = function(){ 
    var canvas = document.getElementById("myCanvas"); 
    var context = canvas.getContext("2d"); 
    var imageObj = new Image(); 
    imageObj.onload = function(){ 
     context.drawImage(imageObj, 10, 10); 
     context.font = "40pt Calibri"; 
     context.fillText("My TEXT!", 20, 20); 
    }; 
    imageObj.src = "darth-vader.jpg"; 
}; 

उदाहरण: