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

Question

I am having trouble placing a div over a canvas where the canvas is still visible. I can only get it to where the div is over the canvas but the canvas is hidden. If anyone has an example that would be lovely.

var canvas = document.querySelector('canvas');
canvas.width = screen.width;
canvas.height = screen.height;
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);

body {
  background-color: #19191b
}

<div align="center">
  <button id="test">Test button that needed some text to make it longer</button>
  <br>
</div>
<div>
  <canvas></canvas>
</div>

So the button takes up the entire width of the screen and you cannot see anything beneath it. I would like the div to be transparent so you can see the triangles beneath it.

Answer 1

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>