JSFiddle - React, Tailwind, and code Playground

HTML

<canvas></canvas>

JavaScript

const ctx = document.querySelector("canvas").getContext("2d");
(async () => {
  const png_blob = await fetch("https://upload.wikimedia.org/wikipedia/commons/4/47/PNG_transparency_demonstration_1.png").then(r=>r.ok&&r.blob());
  const png_dataURL = await readAsDataURL(png_blob);
  const anti_cache = "#" + Math.random();
  const svg_markup = `<svg xmlns="http://www.w3.org/2000/svg" width="300" height="150" viewBox="0 0 100 100">
  	<rect width="10" height="10" fill="purple"/>
  	<image href="${ png_dataURL + anti_cache }" width="100" height="100"/>
  </svg>`;
  const svg_blob = new Blob([svg_markup], { type: "image/svg+xml" });
	const img = new Image();
  img.src = URL.createObjectURL(svg_blob);
  img.onload = (evt) => {
	  ctx.drawImage(img, 0, 0)
  };
})().catch(console.error);

function readAsDataURL(blob) {
	const reader = new FileReader();
  return new Promise((res, rej) => {
  	reader.onload = () => res(reader.result);
    reader.onerror = rej;
  	try {
    	reader.readAsDataURL(blob);
    }
    catch(err) {
    	rej(err);
    }
  });
}