Efficient HTML Div with hole in it

Question

Let me explain a bit more, I am trying to have a large area (full screen) with a fixed size hole in it. The hole will follow the mouse around the screen. Think of having a

Answer 1

I would suggest a single div with which is partially opaque. Have it have transparent background, but black borders. As the mouse moves around, adjust the thickness of the borders. Because it's partially opaque (say 50%), the part covered by the borders will seem grayed out. Remember, borders can be as thick as you want - even hundreds of pixels. This way you don't need to use images, or modify the DOM at all - just change the style properties of the single div.

EDIT: Just noticed the requirement to let mouse events through. I believe the single div solution fails here. A four-div solution would need to be used. However, this can still be done by using black, semi-opaque divs (instead of background images). They can then be resized (via dynamically changing the style object) rather than removed and recreated (not sure if this is what OP means by "re-painting").