javascript - Trying to draw a pattern divided to a few parts with html5 canvas -

i need draw html5 canvas shape, i'm able draw 1 canvas.

i need handle each part of unique object - listen mouse on each part, determine on of parts user hovering mouse on, , let user option fill relevant part of shape.

var canvas = document.getelementbyid('shape'); var context = canvas.getcontext('2d'), width = $('#shape').width(), part_width = width / parts_num;  context.beginpath();  var start_x = 17, end_x = 17 + part_width; (var = 0; < parts_num; i++) { context.moveto(start_x, 0);  context.lineto(end_x,0); context.moveto(start_x, 0); context.beziercurveto(50+start_x, 30, 40+start_x, 45, 13+start_x, 89); context.moveto(13+start_x, 89); context.beziercurveto(0+start_x, 110, 0+start_x, 126, 27+start_x, 174); context.moveto(28+start_x, 174); context.lineto(85+start_x,174); start_x += part_width;//80 x starting point }; context.linewidth = 5; context.strokestyle = "red"; context.stroke(); 

i suggest using createjs. make life whole lot easier while working canvas.

here demo of how handle each shape object createjs.

click on individual shape see how each 1 triggers it's own handler.

function curveshape(index, start_x, end_x) {     var shape = new createjs.shape();     var context = shape.graphics.beginstroke("red").beginfill("#ffffee");         context.moveto(start_x, 0);     context.beziercurveto(start_x + 10, 30, start_x + 10, 45, start_x - 15, 90);     context.beziercurveto(start_x - 30, 120, start_x - 30, 135, start_x, 180);     context.lineto(end_x, 180);     context.beziercurveto(end_x - 30, 135, end_x - 30, 120, end_x - 15, 90);     context.beziercurveto(end_x + 10, 45, end_x + 10, 30, end_x, 0);     context.lineto(start_x, 0);      shape.name = "shape " + index;     shape.x = shape.y = 30;     shape.addeventlistener("mousedown", function () {         alert("i " + shape.name);     });      return shape; }  var stage = new createjs.stage("shape");      for(var = 0; < 4; i++)      stage.addchild(new curveshape(i+1, * 80, (i + 1) * 80));     stage.update();