CSS Placera canvas över img

Jag är helt kass på css men försöker bygga ihop en lite app för att testa "facial-recognition" på bilder. Jag har försökt följa några guider som jag hittat men eftersom mitt projekt inte är exakt likadant uppbyggt som i exemplen så har jag kört fast i css-delen där jag behöver placera ett canvas-element över ett img-element.

Hur gör jag för att canvas:en alltid ska lägga sig över img-elementet och få samma dimensioner oavsätt hur stor eller liten bilden är ?
Jag använder mig av react/tailwind men jag antar att css:en är likadan oavsätt bara att jag behöver använda mig av tailwinds förkortningar. Jag satte bredden på bilden till 4/5 bara för att man ska se div:en som ligger bakom.

export default function FaceDashboard() {
  const imgUrl =
    "https://www.incimages.com/uploaded_files/image/1920x1080/gett...";
  return (
      <div className="flex bg-green-500 ">
        <img src={imgUrl} alt="" className="w-4/5" />
        <canvas className="bg-red-500 absolute opacity-20 w-5/6" ></canvas>
      </div>
  );
}