Is it possible to make a through window using HTML / JS / CSS?

Question

I need to make a through window when the user clicks at a given position on the screen, something like this:

This, I have to select an arbitrary area on the screen (with a fixed width and height) in the place where the user clicks.

I have two options:

• Use the plugin to take screenshots (like these ).
• Create 4 gray boxes.

I don't like any of these options for various reasons:

• Using these plugins eliminates my needs and adds extra page load time and undesirable complexity.
• Managing these fields may be difficult in the future, and browser compatibility may be a problem.

So my question is, is there a way to do this in a simple way using HTML (HTML5 and canvas in order), CSS, and Javascript / JQuery? A specific jQuery plugin would be an option because I could forget about serving this code.

Answer 1

I did this once, I'm not sure everyone will agree with my implementation, but at the time, this worked for me:

Create a div in the right place, set the height and width (for the window effect); put the div in the right place and then just add the schema to it.

body { background-image: url(http://lorempixel.com/800/800/nature/5/); background-size: cover; } .windowDiv { position: absolute; top: 100px; left: 100px; height: 300px; width: 300px; outline: 4000px solid rgba(0, 0, 0, 0.5); } 

 <div class="windowDiv"></div> 

EDIT: use background color, not transparency.

2nd EDIT: as A. Wolf said, you should use the contour instead of the border for more convenient positioning.