JSFiddle - React, Tailwind, and code Playground

by m1erickson

HTML

<br />
<p>This is an image with a same-sized canvas directly on top.</p>
<br/>
<p>The red-tint you are seeing is a 10% red background on the canvas,</p>
<br/>
<p>The image+canvas are aligned by position:absolute to an insideWrapper.</p>
<br/>
<p>The outsideWrapper is for the webpage designer to use (to position/size
    & just be creative with the elements).</p>
<br />
<div class="outsideWrapper">
    <div class="insideWrapper">
        <img src="http://www.lynnecalder.com/house_clipart.gif" class="coveredImage">
        <canvas class="coveringCanvas"></canvas>
    </div>
</div>

CSS

body {
      background-color: ivory;
  }
  .outsideWrapper {
      width:125px;
      height:125px;
      margin:20px 60px;
      border:1px solid blue;
  }
  .insideWrapper {
      width:100%;
      height:100%;
      position:relative;
  }
  .coveredImage {
      width:100%;
      height:100%;
      position:absolute;
      top:0px;
      left:0px;
  }
  .coveringCanvas {
      width:100%;
      height:100%;
      position:absolute;
      top:0px;
      left:0px;
      background-color: rgba(255, 0, 0, .1);
  }