Html 画布透明度遮罩效果重置

我正在尝试将画布覆盖在页面上，试图使其看起来像是蒙了霜，然后使用mousemove将其清除，如下所示：

我已经创建了一个JSFIDLE-

我添加了一个函数clock（），以每秒运行一次，并用颜色填充画布，这样画布需要再次清除，但它不起作用，只需完全移除填充

---

谁能告诉我如何重新设置画布，使其重新充满颜色？如果可以缓慢地完成，使其看起来像再次冻结一样，这将是一个额外的好处。

在重新填充画布之前，您需要将

globalCompositeOperation

设置回默认

source over

值：

function clock() {
    ctx.globalCompositeOperation = 'source-over';
    ctx.globalAlpha = 0.95;
    ctx.fillStyle = "rgb(0, 255, 255)";
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    ctx.globalCompositeOperation = 'destination-out';
}

---

谢谢，我应该更加注意该属性及其作用我知道这是旧的，但不是在clock（）中重置画布，而是有一种方法来检测已清除的百分比。所以我们可以在清除75%以上的数据时触发一个函数。提前谢谢

function clock() {
    ctx.globalCompositeOperation = 'source-over';
    ctx.globalAlpha = 0.95;
    ctx.fillStyle = "rgb(0, 255, 255)";
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    ctx.globalCompositeOperation = 'destination-out';
}