使用JSF在图像内绘制区域

Question

我有一个有很多圆圈的图像（没有颜色）。当用户单击特定的圆圈时，应用程序必须询问所需的颜色并使用此颜色绘制此圆圈。

我的形象是这样的：

所以，我使用以下技术：JSF（使用Primefaces）+ JPA + Maven + Spring PostgreSQL。我最初的解决方案是： “在XHTML页面中引入图像（带标签）和标签，映射所有圆圈区域。因此，当用户在映射区域内单击时，我将启动一个javascript代码，在该区域中绘制具有特定颜色的图像（通过圆圈）。“

我认为这个解决方案有点难以实现和很多工作，不是因为map标签，而是因为用Javascript代码重新绘制另一种颜色的区域的过程。

为此存在一些更好的解决方案？也许是JAVA中的API或更简单，更高效的东西？