如何web上实现批注的特效

请教前端大神，
如何web上实现批注的特效，类似下图红色部分。一条线，一个方框；方框内可以填写批注文字；线的左起点可以拖拽，方框也可以拖拽。
最好是有现成的js库可用，能实现以上的核心功能即可，美观不太要求。

https://www.oschina.net/code/snippet_925404_48582

我用zrender-2.1.0 实现了一个

但是canvas 遮挡了整个页面，我想要的是 除了线和矩形遮住整个页面，其他没有图形的地方能透过去，做选择、点击。。。等，对后面的网页操作。
不仅是视觉上的遮挡（不是canvas 背景色没有设置透明的问题），是鼠标只能点到最上面一层的canvas ，点不到后面的网页内容了。