title: Html5 canvas loading images with JCanvasScript
body: <p>hello guys I want to load multiple images with JCanvasScript in html5 canvas, but I can't do it. I want to load images side by side in each row. for that I have function loadx(numX, numY) numX - is number of images in a row and numY is number of rows. for example loadX(5,4) or loadX(10,3) is giving me the same result only 1 image.</p>
  
  <p>here is a code</p>
  
  <pre><code>    &lt;script&gt;
          function init(){
              loadx(5, 4);
          }
  
          function loadx(numX, numY){
              var numTotal = numX * numY;
              var imgBMPs = [];
              var sliceImg = new Image();
              sliceImg.src = "abstract.jpg";
              var sliceBmp;
              var imgBmp = [];
              imgBmp['width'] = sliceImg.width / numX;
              imgBmp['height'] = sliceImg.height / numY;
              imgBmp['row'] = 0;
              imgBmp['y'] = 0;
  
              sliceImg.onload = function(){
                  for (i = 0; i &lt; numY; i++){
                  imgBmp['y'] = i * imgBmp['height'];
                      for (a = 0; a &lt; numX; a++){
                          jc.start('canvas');
                          imgBmp = new jc.image(sliceImg, a * imgBmp['width'], imgBmp['y'], imgBmp['width'], imgBmp['height']);
                          imgBMPs.push(imgBmp);
                          jc.start('canvas');
                      }
  
                  }
              }
          }
      &lt;/script&gt;
  </code></pre>
  
  <p>when I tried to debug the code I found out something:</p>
  
  <p>after this</p>
  
  <pre><code>              sliceImg.onload = function(){
                      for (i = 0; i &lt; numY; i++){
                      imgBmp['y'] = i * imgBmp['height'];
  </code></pre>
  
  <p>I added the code</p>
  
  <pre><code>alert (imgBmp['height']);
  </code></pre>
  
  <p>and when I refreshed the page First result was the number but other were "Undefined" so what is wrong?</p>