title: Use a for loop to dynamically create an image drawn within a canvas
body: <p>This is my code:</p>
  
  <pre><code>&lt;canvas id="hour6" width="1024px" height="764px"&gt;
      &lt;img id="hour6map" src=""/&gt;
  &lt;/canvas&gt;
  
  &lt;canvas id="hour12" width="1024px" height="764px"&gt;
      &lt;img id="hour12map" src=""/&gt;
  &lt;/canvas&gt;
  
  &lt;canvas id="hour18" width="1024px" height="764px"&gt;
      &lt;img id="hour18map" src=""/&gt;
  &lt;/canvas&gt;
  
  &lt;canvas id="hour24" width="1024px" height="764px"&gt;
      &lt;img id="hour24map" src=""/&gt;
  &lt;/canvas&gt;
  
  &lt;canvas id="hour30" width="1024px" height="764px"&gt;
      &lt;img id="hour30map" src=""/&gt;
  &lt;/canvas&gt;
  
  &lt;canvas id="hour36" width="1024px" height="764px"&gt;
      &lt;img id="hour36map" src=""/&gt;
  &lt;/canvas&gt;
  
  &lt;canvas id="hour42" width="1024px" height="764px"&gt;
      &lt;img id="hour42map" src=""/&gt;
  &lt;/canvas&gt;
  
  &lt;canvas id="hour48" width="1024px" height="764px"&gt;
      &lt;img id="hour48map" src=""/&gt;
  &lt;/canvas&gt;
  </code></pre>
  
  <p>I need to be able to dynamically create all of these images within canvases using a for loop. Can anyone tell me how to use a for loop to generate all of these canvases with the images in them.</p>