JSFiddle - React, Tailwind, and code Playground

by brigand

HTML

<canvas id="canvas" width="400" height="200"></canvas>
<div id="out_img"></div>
<div id="out_iframe"></div>

JavaScript

const ctx = canvas.getContext('2d');
ctx.fillRect(0, 0, 400, 200);
ctx.fillStyle = 'hotpink';
ctx.fillRect(0 + 30, 0 + 30, 400 - 60, 200 - 60);
canvas.toBlob((blob) => {
	const url = URL.createObjectURL(blob);
	setInterval(() => {
  	out_img.innerHTML = `<img src="${url}" /> ${Math.random()}`;
    out_iframe.innerHTML = `<iframe src="${url}" width="400" height="200" /> ${Math.random()}`;
  }, 500);
});