django3+bootstrap4示例中canvas clearRect、fillText失效但fillRect可用原因

我正尝试使用canvas在img标签上方制作带镂空效果的半透明覆盖层。基础覆盖层效果可以正常实现，但clearRect(x,y,width,height)始终无法在覆盖层上生成镂空，让下方图片透过覆盖层显示。

不过我可以使用fillRect配合透明色填充矩形的方式生成镂空，因此判断整体代码逻辑没有问题，始终无法理解clearRect为何不生效。

这个网页基于Django和Bootstrap 4开发，我制作了剔除所有AJAX、模板标签的最小复现案例：当鼠标悬停在「hover here」按钮上时覆盖层会显示，但只能看到通过fillRect实现的镂空效果，clearRect实现的镂空完全不显示，该问题在Firefox和Chrome浏览器中均可复现。

我在调用clearRect时哪里出错了？谢谢！
——Mark

补充说明：我尝试使用fillText在canvas上绘制文本，该功能同样无法生效。我的canvas配置哪里出了问题，导致clearRect和fillText都无法正常工作？我已经更新了最小复现案例，同步复现fillText的异常表现。

内容的提问来源于stack exchange，提问作者user1045680