画布：在整个画布上创建半透明覆盖，除了一个窗口

Question

I have a rectangular canvas with an image painted on it. As the user moves the cursor over the canvas, I'd like to make the canvas semitransparent except for a small rectangle around the cursor, which I'd like to retain the underlying image content in full opacity.

So my question in brief is how to "mute" the canvas except for a small rectangle.

My first thought was to create a semitransparent overlay over the entire canvas, then just paint the rectangular region that should be full opacity again, but this makes the background disappear while I want to retain it at 0.2 opacity:

 var elem = document.querySelector('canvas'); var ctx = elem.getContext('2d'); elem.width = 400; elem.height = 300; ctx.fillStyle = '#ff0000'; ctx.fillRect(0, 0, elem.width, elem.height); elem.addEventListener('mousemove', function(e) { ctx.globalAlpha = 0.2; ctx.fillStyle = '#ffffff'; ctx.fillRect(0, 0, elem.width, elem.height); var x = e.clientX; var y = e.clientY; var d = 30; ctx.fillStyle = '#ff0000'; ctx.fillRect(xd, yd, d*2, d*2); })

 <canvas/>

Does anyone know the most performant way to mute the background to 0.2 opacity while retaining the rectangle around the cursor at full opacity? Any pointers would be super helpful!

Answer 1

Here's the two canvas method:

 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, elemA.width, elemA.height); elemB.addEventListener('mousemove', function(e) { bctx.clearRect(0, 0, elemB.width, elemB.height); var x = e.clientX; var y = e.clientY; var x0 = x-10; var x1 = x+10; var y0 = y-10; var y1 = y+10; // draw boxes; origin is top left bctx.globalAlpha = 0.8; bctx.fillStyle = '#ffffff'; bctx.fillRect(0, 0, elemA.width, y0); // top bctx.fillRect(0, y0, x0, elemB.height+20); // left bctx.fillRect(x0, y1, elemB.width+20, elemB.height); // bottom bctx.fillRect(x1, y0, elemA.width, y1-y0); // right })

 * { margin: 0; } #c { position: relative; } #a, #b { position: absolute; top: 0; right: 0; bottom: 0; left: 0; } #b { z-index: 1; opacity: 0.5; }

 <div id='c'> <canvas id='a'></canvas> <canvas id='b'></canvas> </div>