jquery - Setting up different droppable area in one canvas HTML5 -

i want have different droppable area in 1 canvas, example can seen on link http://custom.case-mate.com/diy?bypasslandingpage=true#design/iphone5_barelythere want drag , drop images on different portions of same canvas.

after checking link, can tell me how have done this?

what first define regions in array want use drop zones locally on canvas.

from there check mouse client position receive in drop event adjusted canvas:

/// random regions check against regions = [[0, 0, 100, 100],            [120, 50, 100, 100],            [30, 230, 100, 100],            [300,300,100,100]],  /// used adjust mouse pos. later rect = canvas.getboundingclientrect(), ... 

setup canvas handle drop events:

canvas.addeventlistener('dragover', filedragover, false); canvas.addeventlistener('drop',     fileselect,   false); 

when drop files canvas can check - here draw random fill color region file(s) dropped @ (if any):

function fileselect(e) {      e.stoppropagation();     e.preventdefault();      /// adjust mouse position relative canvas            var x = e.clientx - rect.left,         y = e.clienty - rect.top;      /// iterate regions     for(i = 0; r = regions[i]; i++) {          /// mouse in region?         if (x >= r[0] && x < r[0] + r[2] &&             y >= r[1] && y < r[1] + r[3]) {              /// if so, fill region             ctx.fillstyle = 'rgba(' +                 parseint(255 * math.random(), 10) + ',' +                 parseint(255 * math.random(), 10) + ',' +                 parseint(255 * math.random(), 10) + ',' +                 '0.5)';              ctx.fillrect(r[0], r[1], r[2], r[3]);              /// ... else             break;         }     } 

}

here working example (drop files on boxes):

online demo