¿Cómo escribir texto sobre la imagen en canvas HTML5?

Question

Quiero mostrar una imagen en el lienzo e insertar un texto en la parte superior de esa imagen.

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

Estoy obteniendo solamente una imagen aquí pero no el texto; el texto está detrás de la imagen. ¿Cómo insertar el texto en la parte superior de la imagen?

Answer 1

Esto se debe a que dibuja el texto antes de que la imagen se haya cargado y dibujado. Debe dibujar el texto que debe estar en la parte superior de la imagen después de dibujar la imagen. Prueba este código en su lugar:

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

Ejemplo: