How to Overlay a Div Over a Canvas CSS

How to overlay a div over a canvas CSS

Try this:

#container {  position: relative;}#container canvas, #overlay {  position: absolute;}canvas {  border: 1px solid black;}

<div id="container">  <canvas></canvas>  <div id="overlay">This div is over the canvas</div></div>

Overlay a canvas over a div

Almost there. Move width and height on the container, make it relative, and the editor and canvas absolutely positioned at 0,0 with 100% width/height. The zIndex of your editor must be lower than the zIndex of your canvas. fiddle

Overlay canvas on a div with css

2 ways as far as I can see

1) use another nested div with a no background set so its transparent. Then inherit the parents dimensions in the CSS

<div id='rings'>
   <div id='overlay'>

   </div>
</div>

css-
#rings
{
width: 200px;
height: 200px;
}

 #rings div#overlay
 {
    width: inherit;
    height: inherit;
 }

2) or create a seperate, absolutely positioned DIV and use z-index in the CSS to overlay it

<div id='rings'>

</div>

<div id='overlay'>

</div>

HTML/CSS: Overlay an empty div over a canvas

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

How can I place a div over a canvas

Just give "div" and "canvas" same height and width. and canvas should be inside div.
like this-->

HTML/CSS

<div style="width: 500px; height: 400px">
  <canvas style="width: 100%; height:100%"></canvas>
</div>

Overlay canvas over canvas

Right now you are scrolling the element that contains both of your canvas - so both of them move. So, put the second canvas into its own container element, and set overflow for that instead, so that only the content of that container (which is only the second canvas) moves.

The new container element needs to be positioned the same way as the second canvas was before (absolute), and that canvas itself then not absolute any more.

In the following example I replaced the empty canvasses with images, so the effect becomes visible. (Sadly, the images from the placeholder service don’t seem to work via HTTPS any more, that worked yesterday. But you got the general idea, I think.) https://jsfiddle.net/wz2g8hwz/4/

#container {  position: relative;  border: 1px solid black;  width: 400px;  height: 200px;}
#canvas1 {  position: absolute;  left: 0;  top: 0;  border: 3px solid green;  width: 100%;  height: 100%;}
#innerContainer {  position: absolute;  left: 0;  top: 0;  width: 100%;  height: 100%;  overflow: auto;  border: 2px solid red;}
#canvas2 {  opacity: .5;  width: 1200px;  height: 800px;}

<div id="container">  <img id="canvas1" src="//via.placeholder.com/400x200">  <div id="innerContainer">    <img id="canvas2" src="//via.placeholder.com/1200x800">  </div></div>

placing 50% transparent div over canvas so canvas is still visible

Use position:absolute so you can freely position elements in their parent element with top or bottom and left or right. This allows HTML elements to overlap. Make sure that those elements you want to be in the foreground come after those you want to be in the background (or alternatively, use the z-index CSS property).

This is your code slightly modified for faster results. I did not change anything of matter in the JS section (just removed the resizing code so the demonstrated behavior is visible sooner). Interesting are the changes to the CSS and HTML below.

var canvas = document.querySelector('.mycanvas');var context = canvas.getContext('2d');var tau = 2 * Math.PI;
function Triangle(canvs, cnt, sid, f) {  this.phase = 0;  this.ctx = canvs.getContext('2d');  this.first = f;  this.sides = sid;  this.canv = canvs;  this.draw = drawTriangle;  this.size = 100;}
function drawTriangle() {  requestAnimationFrame(drawTriangle.bind(this));  var x = 0;  var y = 0;  var centerX = this.canv.width / 2;  var centerY = this.canv.height / 4;  this.phase += 0.005 * tau;
  if (this.first == 1) {    this.ctx.clearRect(0, 0, this.canv.width, this.canv.height);  }  this.ctx.beginPath();  for (var i = 0; i <= this.sides; i++) {    this.ctx[i ? 'lineTo' : 'moveTo'](      centerX + this.size * Math.cos(this.phase + i / this.sides * tau),      centerY + this.size * Math.sin(this.phase + i / this.sides * tau)    );  }  this.ctx.strokeStyle = '#dda36b';  this.ctx.stroke();  this.size--;}
var collection = [];
var triangle1 = new Triangle(canvas, context, 3, 1);triangle1.draw();
var i = 0;
function nextFrame() {  if (i < 1000) {    collection[i] = new Triangle(canvas, context, 3, 0);    collection[i].draw();    i++;    setTimeout(nextFrame, 500);  }}setTimeout(nextFrame, 0);

.mycanvas {  position:absolute;  background-color: #19191b}.mydiv {   position:absolute;   left:100px;   top:30px;   opacity:0.5;   background-color: rgb(100, 100, 200);}

<div>    <div>      <canvas class="mycanvas"></canvas>    </div>    <div class="mydiv">       Hello World!    </div></div>

How to overlay div on canvas without creating more space

You currently have the width of the content set to 100%. This means that this div has a width of 100% of the screen.
Your margin-left is 30%, making the total width 130%. Make your contenta width of 70% and the problem is solved, as that totals to 100%.

Edit: I made the card wider to show the text, just so you know.

#canvas{  background:black;  width:100%;  height:100%;  position:absolute;  z-index: -1;  overflow: hidden;}
body, html{  height:100%;  margin:0;}

.content{  display:inline-block;  left: 30%;  top:30%;  width: 70%;  position:relative;}
.card{  background-color:green;  width:10%;  height 100%;  border: white solid 2px;}

<body>    <canvas id="canvas" resize hidpi=off></canvas>      <div class="content">        <div class="card">          <h1 class="card__title">A</h1>          <p class="card__description">            Snare          </p>        </div>      </div></body>

How to Overlay a Div Over a Canvas CSS