javascript - Make multiple canvas or overlay drawings on the same canvas html5 -

i need advice, have html canvas, in html can add circles , link these make figure, want insert search can find different figures , focussed on it, don't know if it'll better : overlay figures or use different canvas each figure. (i'm not implement search function yet.) think?

here functions makes de draws

//this function puts circles on <table>, , other function takes img coordinates , link making figure.

function position(year, mon) {     $('#' + year + ' .' + mon).prepend('<img class="black_point" src="./images/circle.png"/>'); }       var table = document.getelementbyid("tabla");         var images = table.getelementsbytagname("img");           var canvas = document.getelementbyid("micanvas");         var ctx = canvas.getcontext("2d");         var x,y; // remember coordinates          canvas.width  = table.offsetwidth;         canvas.height = table.offsetheight;          function connect(image, index) { //this function link images             var tabbcr = table.getboundingclientrect();             var imgbcr = image.getboundingclientrect();             x = imgbcr.left + (imgbcr.width / 2) - tabbcr.left;             y = imgbcr.top + (imgbcr.height / 2) - tabbcr.top;             index === 0 ? ctx.moveto(x, y) : ctx.lineto(x, y);         }          //this function add new canvas         function figure(){          /*$('#micanvas').prepend('<canvas id="mycanvas">su navegador no soporta canvas.</canvas>');          //this property overlay figures          cxt.globalcompositeoperation="source-over";/*   //which better implement search function?         }          // new path here         ctx.beginpath();          for(var i=0; i<images.length; i++){            connect( images[i], i);  // provide index can sep. move/line         }          // @ end:         ctx.fill(); 

use 1 html canvas hold connected circles.

this simplifies event handling when focusing / blurring figures.

you can test if mouse inside 1 of circles this:

// given circle defined centerx, centery, radius var dx = mousex - centerx; var dy = mousey - centery; var isinside = dx*dx+dy*dy <= radius*radius; 

here's outline of how focus on figure:

1. create javascript object defining each circle. if set of objects makes figure, add group property each circle-object representing group circle member of.

2. put circle-objects in array.

3. in mouse event handlers, iterate through circle-objects-array , find circle under mouse. circle's group has been focused.