title: Dynamic Canvas DrawImage Function
body: <p>I've got a problem filling 25 canvas elements automatically in a for loop. They are numbered like so: <code>can01</code> to <code>can25</code>.</p>
  
  <p>I've tried all I knew to draw different images on the canvas and I have spent a lot of time in searching a few articles which are about this problem but I haven't found any.</p>
  
  <p>This is my working code to fill all canvas elements with the same image:</p>
  
  <pre><code>var imageGrass = new Image();       
  
  imageGrass.src = 'recources/imagesBG/grass.jpg';
  
  imageGrass.onload = function() {
      for (var i = 1; i &lt; 26; i++)
      {
          if( i &lt; 10 )
          {
              var task = "can0" + i + "_ctx.drawImage(imageGrass, 0, 0);";
              eval(task);
          }
          else
          {
              var task = "can" + i + "_ctx.drawImage(imageGrass, 0, 0);";
              eval(task);
          }
      }
  }
  </code></pre>
  
  <p>But I really don't know how to make the <code>imageGrass.src</code> dynamic. For example, the canvas element no. 5 (can05) in this case shall look like stone texture.</p>
  
  <p>I´m really looking forward to read your ideas. I just don't get it.</p>