css - creating thumbnail images in canvas using javascript -

i started javascript , i'm trying code image search gallery. i'm getting source of images xml database file.

i have loop goes trough sources of images, , draw each images on canvas. wanna when click on images wanna show real sized image in window.

how do (preferably using javascript)?

heres part of code:

 //goes trough xml database searching image  ( var p = 0 ; p < xmldoc.firstchild.childnodes.length ; p ++ )                         {                             if ( xmldoc.firstchild.childnodes[p].nodename == 'path' )                             {                                  document.getelementbyid("results_id").innerhtml += xmldoc.firstchild.childnodes[p].textcontent+"<br />";                                  var src = xmldoc.firstchild.childnodes[p].textcontent;                                  //fill array images                                 arrimg.push(src);                              }                         }                     }                 }             }         }         //resize , draw images founded         resizecanvas(arrimg.length);         for(var = 0; < arrimg.length; i++)         {             drawimg(arrimg[i]);          }     }     //function draw images         function drawimg(src)     {         var img = new image();         img.onload = function ()         {              if (x > ctx.canvas.width)             {                 y = y + 310;                 x = 0;             }              img.width = 300;             img.height = 300;              ctx.drawimage(img, x, y, img.width, img.height); //(0,0)             x = x + 310;         };         img.src = src;     }      //function resize canvas number of images found     function resizecanvas(nimages)     {         var height = (nimages/4);         ctx.canvas.height = math.round(height) * 310;         alert(ctx.canvas.height);     }; 

thanks in advance.

as canvas passive , doesn't know drawn need keep track of image thumbnails , have drawn them.

this enables check image's region when click on canvas , can present image being clicked.

update: online demo here

for example - keep track of images:

var imageregions = [];  /// new array holds image regions  for(i; < count; i++) {      /// load image , position , dimension on canvas     ctx.drawimage(img, x, y, img.width, img.height); //(0,0)     x = x + 310;      /// store region:     imageregions.push({image: img,                        x:x, y:y, width:img.width, height:img.height});  } 

now when click canvas can check array regions find 1 coordinates within , present image:

canvas.onclick = function(e) {      /// adjust coordinates relative canvas     var rect = canvas.getboundingclientrect(),         x = e.clientx - rect.left,         y = e.clienty - rect.top,         = 0, r;      for(; r = imageregions[i]; i++) {          /// got winner?         if (x > r.x && x < r.x + r.width &&             y > r.y && y < r.y + r.height) {              presentimage(r.image);   /// dummy function, present image             return;         }     } }