Javascript 半透明圆点上的加色

我有一个正方形的图标，用黑色的面具调暗。这个面具上面应该有很多不同颜色的点。这些点的颜色不同，所以当它们彼此重叠时，它们会变亮。结合起来，足够多的这些会使黑色面具变成五色甚至白色，露出下面的图像

这怎么可能呢？客户端，使用canvas还是css3？服务器端，用ImageMagick还是别的什么

这里有一个指向画布上添加颜色的链接：

HTML5画布++屏幕模式

或者，在链接时，使用“加法全局复合”模式

或者使用ImageMagick

---

或者与添加一起使用。

可以“用代码”完成。您列出的所有内容都是可能的。你试过什么吗？你的问题是什么，或者你是在请别人帮你写吗？对不起，我可以说得很具体。我以前从未使用过canvas，我正在找人向我展示必要的api方法，而不是一件一件地到处尝试。玩过photoshop后，我想我需要用减法堆肥制作一个白色层。这将使图像变为黑色。在该覆盖层变暗的点中，图像显示为透明。因此，这些点需要彼此变暗，而不是变亮，并从所需的颜色反转。我在使用上下文混合器时遇到问题——覆盖层总是出现在图像画布下方，我不知道为什么。您可以查看源代码，但由于跨域问题，它无法运行：@Peter将其缩减。制作一个可复制的测试用例，该用例具有显示问题所需的绝对最小代码量。让它在JSFIDLE上实际运行。如果您可以删除HTML、CSS或JS，但问题仍然存在，那么您还没有完全消除它。要么你在这个过程中会有“啊哈！”的时刻，要么你最终会得到一些我可以真正帮助你的东西。你现在粘贴的东西甚至不是合法的JavaScript，更不用说显示问题的工作代码了。这是一个工作提琴（从咖啡中转换成js），蓝色的图片补充道：这是一个托管版本，使用相同的代码，复制并粘贴。蓝色在照片后面：简而言之，你需要。如果您将最后一行代码更改为

setTimeout（function（）{ocontext.blendOnto（ucontext，'add'）}，5000）

它工作正常，而1ms的延迟有时有效，有时失败。如果将代码包装在

$（'#image1'）.bind（'load'，function（）{…}）中它总是有效的。