Javascript 画布：在除一个窗口外的整个画布上创建半透明覆盖

我有一块长方形的画布，上面画着一幅图像。当用户将光标移动到画布上时，我希望使画布半透明，但光标周围有一个小矩形，我希望以完全不透明度保留底层图像内容

因此，我的问题是如何“静音”画布除了一个小矩形

我的第一个想法是在整个画布上创建一个半透明的覆盖层，然后只绘制应该是完全不透明度的矩形区域，但这会使背景消失，而我希望将其保留为0.2不透明度：

var elem=document.querySelector（'canvas'）；
var ctx=elem.getContext（'2d'）；
元素宽度=400；
元素高度=300；
ctx.fillStyle='#ff0000'；
ctx.fillRect（0，0，元素宽度，元素高度）；
元素addEventListener（'mousemove'，函数（e）{
ctx.globalAlpha=0.2；
ctx.fillStyle='#ffffff'；
ctx.fillRect（0，0，元素宽度，元素高度）；
var x=e.clientX；
变量y=e.clientY；
var d=30；
ctx.fillStyle='#ff0000'；
ctx.fillRect（x-d，y-d，d*2，d*2）；
})

---

以下是双画布方法：

var elemA=document.querySelector（'a'）；
var elemB=document.querySelector（“#b”）；
var ctx=elemA.getContext（'2d'）；
var bctx=elemB.getContext（'2d'）；
elemA.width=elemB.width=400；
elemA.height=elemB.height=300；
ctx.fillStyle='#ff0000'；
ctx.fillRect（0，0，元素宽度，元素高度）；
elemB.addEventListener（'mousemove'，函数（e）{
bctx.clearRect（0，0，elemB.width，elemB.height）；
var x=e.clientX；
变量y=e.clientY；
var x0=x-10；
var-x1=x+10；
var y0=y-10；
变量y1=y+10；
//绘制框；原点位于左上角
bctx.globalAlpha=0.8；
bctx.fillStyle='#ffffff'；
bctx.fillRect（0，0，elemA.width，y0）；//top
bctx.fillRect（0，y0，x0，elemB.height+20）；//左
bctx.fillRect（x0，y1，elemB.width+20，elemB.height）；//底部
bctx.fillRect（x1，y0，elemA.width，y1-y0）；//右
})

*{
保证金：0；
}
#c{
位置：相对位置；
}
#a、 #b{
位置：绝对位置；
排名：0；
右：0；
底部：0；
左：0；
}
#b{
z指数：1；
不透明度：0.5；
}

---

Ah，我刚刚看到另一块画布躺在这张画布上，可以只使光标附近的区域不透明。。。