CODEWITHSUNDEEP
htmlcanvas
lsgng
lsgng

Reputation: 495

HTML/CSS: Overlay an empty div over a canvas

I would like to overlay an empty div over a canvas to create some kind of vignette effect.

Now for some reason, the vignette div is not visible at all. If I place some text inside of the vingette div, it becomes visible, but only, if I also remove the height property from the vignette class.

Is there some way to just display the empty div on top of the canvas and scale its height and width to 100%?

My code so far:

.container {
    position: relative;
}

.container canvas,
.vignette {
    position: absolute;
    height: 100%;
    width: 100%;
}

.vignette {
    background: radial-gradient(circle, transparent 50%, black 150%);
    <div class="container">
        <canvas id="game-screen"></canvas>
        <div class="vignette"></div>
    </div

Upvotes: 0

Views: 603

Answers (1)

Jeyhun Ashurbayov
Jeyhun Ashurbayov

Reputation: 816

You should insert 

html, body {
  height: 100%;
}

and for .container add:

.container {
    position: relative;
    width: 100%;
    height: 100%;
}


html, body {
  height: 100%;
}
.container {
    position: relative;
    width: 100%;
    height: 100%;
}

.container canvas,
.vignette {
    position: absolute;
    height: 100%;
    width: 100%;
}

.vignette {
    background: radial-gradient(circle, transparent 50%, black 150%);
<div class="container">
        <canvas id="game-screen"></canvas>
        <div class="vignette"></div>
    </div

Upvotes: 1

Related Questions