HTML5 캔버스의 이미지 위에 텍스트를 쓰는 방법은 무엇입니까?

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

예 :