Come scrivere il testo sopra l'immagine nella tela HTML5?

Question

Voglio visualizzare un'immagine su tela e inserire un testo sopra quell'immagine.

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

Sto ricevendo solo un'immagine qui ma non il testo; il testo è dietro l'immagine. Come inserire il testo sopra l'immagine?

Answer 1

Questo perché si disegna il testo prima che l'immagine sia caricata e sia stata disegnata. Devi disegnare il testo che dovrebbe essere sopra l'immagine dopo che l'immagine è stata disegnata. Prova questo codice invece:

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

Esempio: