title: JavaScript Write Text To Image
body: <p>I Have a issue about write text to image. I need loop the image. But i get some issue. When i do it , Last image showing and the images size is small. Do anyone help me ?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var div=document.getElementById("locations");
  var canvas;
  
  window.onload = function(){
      for(var i=0;i&lt;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);
      };
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="locations"&gt;&lt;/div&gt;
  &lt;canvas id="myCanvas" width="75" height="75"&gt;&lt;/canvas&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Result Image</p>
  
  <p><img src="https://i.stack.imgur.com/Liw6H.png" alt="Result Image"></p>