问交互式地绘制到<div>上

EN

我正在构建一个web应用程序，在这个应用程序中，用户可以将区域(多边形)绘制到视频上。我已经实现的一个解决方案是将一个<div>放在视频播放器的顶部，捕捉鼠标的点击。

我现在愿意做的是，能够用鼠标绘制<div>：

• 单击该块绘制一个点
• 按钮，绘制区域，它将用现有的点填充多边形。
• 一个按钮，删除画布，这将重置块

我正在寻找关于使用哪个图书馆的指导。已经听说：

• 拉斐尔(raphaeljs.com/#demo)
• jsDraw2D (Jsleg2d.jsfiction.com/demo/linepolygon.htm)

问题

拉斐尔看上去很可怕，但对我想做的事有点过分。相反，从我测试的内容来看，jsDraw2D似乎运行得很好(只是手动绘制)。

我有几个限制因素，例如：

• 用户正在用鼠标(通过单击)绘制点。
• 用户正在绘制一个不透明的<div> (填充的多边形也应该是透明的)
• 我需要存储点的坐标(至少是多边形的坐标)。

问题

我该用什么？我是否应该坚持使用Raphael，即使实现起来有点困难(我基本上没有JavaScript的背景)？或者你知道一个JavaScript库，它可以做jsDraw2D做的事情，但在更好的地方？

谢谢,