JavaScript画像にテキストを書き込む

Question

I画像にテキストを書き込む際に問題があります。私はイメージをループする必要があります。しかし、私はいくつかの問題が発生します。私がそれをすると、最後の画像が表示され、画像のサイズは小さくなります。誰か助けてくれますか？

var div=document.getElementById("locations"); 
 
var canvas; 
 

 
window.onload = function(){ 
 
    for(var i=0;i<10;i++){ 
 
     canvas=document.createElement("canvas"); 
 
     canvas.style.width="75px"; 
 
     canvas.style.height="75px" 
 

 
     var context = canvas.getContext("2d"); 
 
     var imageObj = new Image(); 
 
     imageObj.onload = function(){ 
 
      context.drawImage(imageObj, 0, 0); 
 
      context.font = "17px Calibri"; 
 
      context.fillText(i, 30, 36); 
 
     }; 
 
     imageObj.src = "image.png"; 
 
     div.appendChild(canvas); 
 
    }; 
 
}

<div id="locations"></div> 
 
<canvas id="myCanvas" width="75" height="75"></canvas>

結果画像

Answer 1

使用canvas.heightと幅の値の代わりに、CSSスタイル。キャンバスを描画した後に適用されるCSSスタイル値。

var div=document.getElementById("locations"); 
 
var canvas; 
 

 
window.onload = function(){ 
 
    for(var i=0;i<10;i++){ 
 
     canvas=document.createElement("canvas"); 
 
     canvas.width=75; 
 
     canvas.height=75; 
 

 
     var context = canvas.getContext("2d"); 
 
     var imageObj = new Image(); 
 
     imageObj.onload = function(){ 
 
      context.drawImage(imageObj, 0, 0); 
 
      context.font = "17px Calibri"; 
 
      context.fillText(i, 30, 36); 
 
     }; 
 
     imageObj.src = "http://placehold.it/350x150"; 
 
     div.appendChild(canvas); 
 
    }; 
 
}

<div id="locations"></div>