JSFiddle - React, Tailwind, and code Playground

HTML

<img class="image" src="#" alt="" id="test">

CSS

.image {
  background-position: 0px 0px     ;
  background-image   : var(--image);
  background-size    : 100% 100%   ;
  background-repeat  : no-repeat   ;
  background-clip    : content-box ;
  background-origin  : content-box ;
}

JavaScript

//Set canvas as source
var test = document.getElementById("test");
test.style.setProperty("--image", "-moz-element(#test)", "");

//Create canvas
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
if(document.mozSetImageElement) {
	document.mozSetImageElement("test", canvas);
}

//Set scale and empty image
canvas.width = 100;
canvas.height = 100;
canvas.toBlob(function(b){test.src = URL.createObjectURL(b);});

//Draw something
ctx.fillStyle = "green";
ctx.fillRect(0, 0, 100, 100);