title: Overlayed HTML Canvas Elements
body: <p>I have a WWWeb page with stacked <code>&lt;canvas&gt;</code> elements. The goal is to draw something persistent in the lower canvas and draw, clear, and redraw, repeatedly, in the upper canvas. According to w3.org and <a href="https://stackoverflow.com/questions/4815166/how-do-i-make-a-transparent-canvas-in-html5">this StackOverflow article</a> (<a href="https://stackoverflow.com/questions/4815166/how-do-i-make-a-transparent-canvas-in-html5">How do I make a transparent canvas in html5?</a>), canvas elements are, by default, transparent. What I am seeing is that not only are they not transparent, but that overlaying via <code>z-index</code> is not working. Here's a "vanilla" version of the page's code (complete and used to generate the images):</p>
  
  <pre><code>    &lt;html&gt;
      &lt;head&gt;
          &lt;title&gt;Canvas Stack&lt;/title&gt;
          &lt;script&gt;
              function doStuff() {
                  drawStuff(document.getElementById("lowerCanvas"), 0, 1);
                  drawStuff(document.getElementById("upperCanvas"), 1, 0);
              }
              function drawStuff(cvs, p0X, p1X) {
                  var ctx = cvs.getContext("2d");
                  ctx.clearRect(0, 0, cvs.width, cvs.height);
                  ctx.strokeStyle = cvs.style.color;
                  ctx.beginPath();
                  ctx.moveTo(p0X * cvs.width, 0);
                  ctx.lineTo(p1X * cvs.width, cvs.height);
                  ctx.stroke();
              }
          &lt;/script&gt;
      &lt;/head&gt;
      &lt;body onload="doStuff();" style="border:solid;"&gt;
          &lt;canvas id="lowerCanvas" style="color:red;height:200px;left:0;position:inherit;top:0;width:300px;z-index:0;" /&gt;
          &lt;canvas id="upperCanvas" style="color:blue;height:200px;left:0;position:inherit;top:0;width:300px;z-index:1;" /&gt;
      &lt;/body&gt;
      &lt;/html&gt;
  </code></pre>
  
  <p>and here's the result:</p>
  
  <p><a href="https://i.stack.imgur.com/89NrN.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/89NrN.gif" alt="enter image description here"></a></p>
  
  <p>If I swap the order of the canvas elements</p>
  
  <pre><code>    &lt;canvas id="upperCanvas" style="color:blue;height:200px;left:0;position:inherit;top:0;width:300px;z-index:1;" /&gt;
      &lt;canvas id="lowerCanvas" style="color:red;height:200px;left:0;position:inherit;top:0;width:300px;z-index:0;" /&gt;
  </code></pre>
  
  <p>the result is </p>
  
  <p><a href="https://i.stack.imgur.com/HjqrX.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/HjqrX.gif" alt="enter image description here"></a></p>
  
  <p>It seems as if the <code>z-index</code> has been ignored and that the order of declaration has primacy.</p>
  
  <p>What I want is</p>
  
  <p><a href="https://i.stack.imgur.com/FzXSu.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/FzXSu.gif" alt="enter image description here"></a></p>
  
  <p>(synthetic image)</p>
  
  <p>The behavior is identical in Chrome, Edge, Firefox, and Internet Explorer under Windows 10. That makes me confident that I'm just missing some detail rather than experiencing an anomaly. However, I'm getting a flattened forehead from whacking my head against a wall and would really appreciate some guidance, here.</p>
  
  <p>Thank you, all!</p>
  
  <p>Some notes (maybe irrelevant; maybe not):</p>
  
  <ul>
  <li><code>style="position:absolute;</code>... (without the <code>left</code> and <code>top</code> entries) seems to do the same thing as <code>style="left:0;position:absolute;top:0;</code>...</li>
  <li>In similar fashion, <code>style="position:inherit;</code>... is probably necessary if the canvas is to reside within a table's <code>&lt;td&gt;</code> and that <code>&lt;td&gt;</code> is other than the first one in a <code>&lt;tr&gt;</code>.</li>
  </ul>