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

例：