title: placing 50% transparent div over canvas so canvas is still visible
body: <p>I am having trouble placing a <code>div</code> over a <code>canvas</code> where the <code>canvas</code> is still visible. I can only get it to where the <code>div</code> is over the <code>canvas</code> but the <code>canvas</code> is hidden. If anyone has an example that would be lovely.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>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 &lt;= 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 &lt; 1000) {
      collection[i] = new Triangle(canvas, context, 3, 0);
      collection[i].draw();
      i++;
      setTimeout(nextFrame, 500);
    }
  }
  setTimeout(nextFrame, 0);</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    background-color: #19191b
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div align="center"&gt;
    &lt;button id="test"&gt;Test button that needed some text to make it longer&lt;/button&gt;
    &lt;br&gt;
  &lt;/div&gt;
  &lt;div&gt;
    &lt;canvas&gt;&lt;/canvas&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>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.</p>