Как написать текст поверх изображения в холсте HTML5?

Я хочу отобразить изображение на холсте и вставить текст поверх этого изображения.

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

Я получаю только изображение здесь, но не текст; текст находится за изображением. Как вставить текст поверх изображения?

Ответы

Ответ 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"; 
};

Пример:

enter image description here