Html5画布图像与按钮单击的图像背景的一部分

Question

我有什么：

1）静态图像和许多部分或者你可以说是矩形框形式的组件（大约25个矩形框，文本在该框内面是一个名称）。

2）我也有25个矩形框的坐标（X1，Y1，X2，Y2） 3）7个角色按钮（前端）

到目前为止我做了什么：

我可以剪切图像的一部分并显示它，但使用它看起来不太好看：

 canvas_Context.drawImage(img,16,242,60,62,16,242,60,62); //Sodium
 canvas_Context.drawImage(img,934,362,76,49,934,362,76,49); //duke
 canvas_Context.drawImage(img,243,204,274,263,243,204,274,263);

然后显示切割部分：

    var dataUrl = canvas.toDataURL();
    window.open(dataUrl, "toDataURL() image", "width=600, height=200");
    Window.document.write("<p>This is 'myWindow'</p>"); 

这是我的问题： 1）当我点击1个角色时，不应出现不属于该角色的矩形。

2）当我点击另一个角色时，我只需要属于该角色的组件。 3）我不希望切割图像只是必须改变不是角色的部分颜色。