Comment écrire du texte sur le dessus de l'image dans le canevas HTML5?

Je veux afficher une image sur la toile et insérer un texte sur le haut de l'image.

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

Je suis seulement une image ici, mais pas le texte; le texte est derrière l'image.
Comment insérer du texte en haut de l'image?

source d'informationauteur Rajesh Rs

  1. 30

    C'est parce que vous tracez le texte avant l'image a été chargé et tiré. Vous devez dessiner le texte qui doit être en haut de l'image une fois l'image est tirée. Essayez ce code à la place: 

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

    Exemple:

    Comment écrire du texte sur le dessus de l'image dans le canevas HTML5?