title: Loading images into canvas (HTML/Javascript)
body: <p>I know this has been discussed before and I've read many articles and tried what was claimed as working, so don't discard my question immediately, please.</p>
  
  <p>I'm trying to load different images into a unified-size canvas. It can be a single image or multiple images, but I'm processing one image at a time.</p>
  
  <p>Here is the main code (HTML/JS/PHP):</p>
  
  <pre><code>&lt;?php
     if ($record-&gt;photo != "") //make the first canvas
     {
       list($width, $height, $type) = getimagesize($record-&gt;photo);
       echo "Width: " .$width. "&lt;br /&gt;";
       echo "Height: " .$height. "&lt;br /&gt;";
     ?&gt;   
     &lt;canvas id="my_canvas" width="341" height = "256"&gt;&lt;/canvas&gt; 
  
     &lt;body&gt;
     &lt;script  type="text/javascript" src="common.js"&gt;&lt;/script&gt;
     &lt;script  type="text/javascript"&gt;
      var img_src = "&lt;?php echo $record-&gt;photo;?&gt;";
      var width = "&lt;?php echo $width;?&gt;"; 
      var height = "&lt;?php echo $height;?&gt;"; 
  
      make_canvas('my_canvas', img_src, width, height);
     &lt;/script&gt;
  
     &lt;?php
     }//if 1
  </code></pre>
  
  <p>Similar block for canvas2, 3 etc. with closing  tag at the end.</p>
  
  <p>Here are versions of make_canvas() function that "somehow" work.  Meaning they sometimes render some pictures on load but may improve on refresh. When there is more than one picture to display I never get it working properly.</p>
  
  <p>Version 1 - inconsistent and caches the last image:</p>
  
  <pre><code>function make_canvas(id, src, width, height)
  {
  
     if (width &gt; 341) 
      {
          var new_width = 341;
          var ratio = new_width / width;
          var new_height = Math.round(height * ratio);
      }  
      else
      {
         var new_width = width;
         var new_height = height;
      }
      document.write("id: " + id + "&lt;br /&gt;");
      document.write("src: " + src + "&lt;br /&gt;");
      document.write("new_height: " + new_height + "&lt;br /&gt;"); 
  
    var canvas = document.getElementById(id),
    context = canvas.getContext('2d');    
    base_image = new Image();
    //base_image.src = '';
  
    base_image.onload = function(){
        context.drawImage(base_image,0,0,new_width, new_height);
    }
  
       base_image.src = src; 
    }
  </code></pre>
  
  <p>Version 2 : may load one image and is caching it on refresh</p>
  
  <pre><code>function make_canvas2(id, src, width, height)
  {
  
     if (width &gt; 341) 
      {
          var new_width = 341;
          var ratio = new_width / width;
          var new_height = Math.round(height * ratio);
      }  
      else
      {
         var new_width = width;
         var new_height = height;
      }
      document.write("id: " + id + "&lt;br /&gt;");
      document.write("src: " + src + "&lt;br /&gt;");
      document.write("new_height: " + new_height + "&lt;br /&gt;"); 
  
    var canvas = document.getElementById(id),
    context = canvas.getContext('2d');    
    base_image = new Image();
    base_image.src = '';
    base_image.addEventListener("load", function() {
    // execute drawImage statements here
    context.drawImage(base_image,0,0,new_width, new_height);
  }, false);
    //base_image.onload = function(){ };
  
       base_image.src = src; 
  
  }
  </code></pre>
  
  <p>I tried adding base_image.complete in IF condition for onload or to WHILE loop within the onload function but could never achieve multiple images displayed correctly on a first load.
  I would appreciate any working examples , preferably similar to above and without jQuery. </p>