Javascript 为什么canvas clearRect（）失败，而fillRect（）在django 3 bootstrap 4示例中工作？

我正在尝试使用

画布

作为半透明覆盖，在

img

标记上使用剪切。我可以让覆盖层正常工作，但由于某种原因，

clearRect（x，y，width，height）

没有在覆盖层中放置剪切，因此图像通过覆盖层显示。但是，我可以用“clear”填充矩形，用

fillRect

制作一个剪切图，所以我认为我的代码可以工作。我不明白为什么

clearRect

不起作用

该网页使用django和Bootstrap4。我创建了一个示例，删除了所有ajax和模板标记以说明问题。当鼠标悬停在按钮

“hover here'

上时，将显示覆盖图，但只显示一个切口-使用

fillRect

的切口，而不是使用

clearRect

的切口。这在Firefox和Chrome浏览器中都会发生

调用

clearRect

有什么不对

谢谢

标记

---

更新：我试图使用

fillText

在画布上写作，但效果不理想。我的画布有什么问题阻止了

clearRect

和

fillText

工作？我更新了JSFIDLE以反映

fillText

问题。

因此，我发现了如何使JSFIDLE中的代码工作，但我仍然不明白为什么

如果我将这些行添加到画布的初始化中，一切都会正常工作

canvas.height = image.height;
canvas.width = image.width;

我已经想到了台词

canvas.style.left = position.left + "px";
canvas.style.top = position.top + "px";
canvas.style.width = image.width + "px";
canvas.style.height = image.height + "px";

注意初始化画布大小，因为在加载页面之前我不知道图像的大小

如果有人能解释为什么这个修复程序使clearRect和fillText工作，请解释

---

新的，有效的。请参阅脚本末尾的注释。

请将您的代码包含在问题本身中。