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

Question

I need to make a see-through window when user click in a given position of the screen, something like this:

It is, I need to highlight an arbitrary area in the screen (with a fixed width and height) in the position where the user clicks.

I have two options:

1. Use a plugin to take screenshots (like these).
2. Create 4 grayed boxes.

I don't like none of these options for different reasons:

1. The use of these plugins exceds my needs and adds an extra page load time and undesired complexity.
2. Manage these boxes may be complex in a future and browser compatibility may be an issue.

So, my question is, is there any way to do this in a simple manner using HTML (HTML5 and canvas is ok), CSS and Javascript/Jquery? A specific Jquery plugin will be an option due I could forget the maintenance of this code.

Answer 1

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

Create a div in the location you want, set height and width (for window effect); position the div in the place you wish and then just add outline 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 rather than opacity.

2nd EDIT: as A.Wolf suggested you should use outline instead of border for easier positioning.