Javascript 在给定坐标的图像上绘制形状-jQuery

我正在构建一个使用。在他们的演示中，当一张脸被识别出来后，他们得到了非常好的用户反馈，如下图所示

我正在尝试实现类似的功能。当时正在考虑Jquery/javascript解决方案。找到了线索，但不是我想要的

给定坐标，例如来自api响应的坐标

"center"=>{"x"=>62.4, "y"=>43.4},
"eye_left"=>{"x"=>74.4, "y"=>41.2, "confidence"=>53, "id"=>449},
"eye_right"=>{"x"=>61.6, "y"=>36.6, "confidence"=>54, "id"=>450},
"mouth_center"=>{"x"=>63.8, "y"=>52.0, "confidence"=>54, "id"=>615},
"nose"=>{"x"=>67.0, "y"=>47.2, "confidence"=>58, "id"=>403}

---

有没有一个简单的库，我可以用它在图片上绘图？非常感谢我能参考的任何线索或在线教程。

我相信你现在已经有答案了，但是如果你检查了这一点，画布部分是否只是工具提示

---

使用画布元素。将图像绘制为背景，并在顶部绘制所需的任何形状。这个例子很简单，所以你不需要一个库来做这件事。请不要只发布链接答案，因为如果链接改变，答案可能会无效。