JavaScript, html5: how to dynamically create a Vignette effect?

Question

So what I need is simple: user presses something, user sees Vignette effect on new div on top of all page (with page size) alike

Is it possible with some html5 canvas art? And how to do such thing?

Answer 1

Well, this is exactly how Chrome's settings page is doing it: http://jsfiddle.net/JRGHM/

.overlay {
  -webkit-box-align: center;
  -webkit-box-pack: center;
  -webkit-transition: 0.25s opacity;
  background: -webkit-radial-gradient(rgba(127, 127, 127, 0.5),
                                      rgba(127, 127, 127, 0.5) 35%,
                                      rgba(0, 0, 0, 0.7));
  bottom: 0;
  display: -webkit-box;
  left: 0;
  padding: 20px;
  padding-bottom: 130px;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 10;
}

As you can see, the important part is the gradient.

You can make that code work in all browsers that support CSS3 gradients by adding the appropriate gradient syntax: http://caniuse.com/#feat=css-gradients