Javascript HTML5中非方形精灵周围的矢量跟踪线

我正在用HTML5制作一个游戏。我有数百张与此类似的图像：

在游戏中的某些点上，我想画一个围绕它们的轮廓。像这样：

我想在不同的时间使用不同的跟踪颜色，但由于内存和带宽的原因，我不想最终得到[number of Sprite]*[number of Color]的额外图像，所以我在看矢量图

我需要解决的实际上是两个不同的问题：

计算精灵表中每个帧的矢量路径。这可以是动态的，也可以是提前存储的

绘制向量路径

我在游戏中使用的引擎是ImpactJS。它不支持向量运算。我使用的游戏引擎的作者手工绘制了自己的矢量图，他从Illustrator中导出了特定图像的矢量，然后使用在线转换工具将其转换为HTML5语法。这不是处理数百张图像的最佳方法，所以我想我应该看看你们其他人有什么信息

我仍然希望使用ImpactJS绘制图像，因为这个游戏已经进行了相当长的一段时间，并且在必要时只需再次绘制图像的轮廓

谢谢你的帮助