title: creating a hierarchical tree structure of images in html5 canvas tag?
body: <p>There is a tree hierarchical relation between a group of images, I want images to be represented as a tree structure in canvas tag with child node images smaller than parent node images and all the images should scale up with some value on mouseover.</p>
  <p>The setscale and translate javascript functions let me do the scaling effect all right but I cannot get mouse event listener functions working right, mouseover and mouseout are not being detected although the images are displayed. I do not get the alert messages I have used for debugging. This is just a test code:-</p>
  <pre><code>     function loadImages(sources, callback){
         var images = {};
         var loadedImages = 0;
         var numImages = 0;
         // get num of sources
         for (var src in sources) {
          numImages++;
         }
         for (var src in sources) {
          images[src] = new Image();
          images[src].onload = function(){
              if (++loadedImages &gt;= numImages) {
                  callback(images);
              }
          };
          images[src].src = sources[src];
         }
         }  
   
   
   
      window.onload = function(){
      var canvas = document.getElementById(&quot;myCanvas&quot;);
      var context = canvas.getContext(&quot;2d&quot;);
      var destX = 20;
      var destY = 20;
      var destWidth = 200;
      var destHeight = 137;
      
      var sources = new Array();
      sources[0]=&quot;darth-vader.jpg&quot;;
      sources[1]=&quot;darth-vader.jpg&quot;;
      
      var imageObj = new Image();
   
      loadImages(sources, function(images){
          context.drawImage(images[0], destX, destY, destWidth, destHeight);
           images[0].onmouseover=function()
          {
              alert('1');
          }
  
          images[0].onmouseout=function()
          {
              alert('2');
          }
          context.drawImage(images[1], destX+200,destY, destWidth, destHeight);
          images[1].onmouseover=function()
          {
              alert('3');
          }
  
          images[1].onmouseout=function()
          {
              alert('4');
          }
            });
           };
  </code></pre>