带孔的模态背景

Question

I am trying to figure out a way in which I can create a transparent modal backdrop but show some parts off the background in a round radius. Something like this.

My mind says it can be possible with Canvas tag. Any suggestions are welcome. Thanks in advance.

Answer 1

You could do it with multiple elements, using an SVG or image for the hole. Only the corners of the image would be filled in.

Or you could make a big SVG that would extend far beyond the edges of the window. Browsers probably clip the rendered area to the window, so it might not perform too badly.

Answer 2

Are you looking for masks? http://www.html5rocks.com/en/tutorials/masking/adobe/

Browser support doesn't look to be great

Answer 3

I bet the enjoyhint jQuery plugin is exactly what you are looking for.

They have a demo here , the third step in is a circle like: