JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="canvas1" width="400" height="400">
    
</canvas>

CSS

canvas {
    border: 1px solid gray;
}

JavaScript

var can = document.getElementById('canvas1');
var ctx = can.getContext('2d');


ctx.font = '32px Georgia';
ctx.fillText('Hello', 2, 32);

var can2 = document.createElement('canvas');
can2.width = 85;
can2.height = 36;
var ctx2 = can2.getContext('2d');

ctx2.drawImage(can, 0, 0, 85, 36, 0, 0, 85, 36);

can.width = can.width;
ctx.drawImage(can2, 0, 0);

var img = new Image();
img.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFUAAAAkCAYAAAD4i3Y+AAACkElEQVRoQ+2ZLU5EQQzHdwkXQHMABA5DgkBhEeBxCDyKGyCwSC6A4AAkOCweHFg8BkWbfUNKM53+Z3nDvA3dZLJ5+7oz7a+ddj7ms/iMTmA+eo/R4SygNgiCgBpQGxBo0GVEakBtQKBBlxGp/xzqOtn/SG1XcXij521qH9QQmQYYf3a5ipG6RiZcUzsbTJFQk3WITDO4GuoRjXTnjHZJ7y+EjDbA+vspvbgZyRIZkTmoPAwiM5I6WKTm4HpQcnDfabh9ai8jay/HsqAiMiOrteiuNP3P6f3VMOotfZ9Q+3S00GA9RyxrFAIMkVl2/OL/SlBltAbUCvwBtQIWKhpQUVIVclOBKvN3Ul+vMqRZSL5EZGSfO/TwlGF3QL89VDAtFqq/yKmbg8IbapUgx84ZhQBDZJiVXHppRyZnV61iekaqBTQFRckgBBgiUwKK6JEN4F5QpcHWNE/Qt0hzvTRDgHky3vsETIKHVkEo1JqUImWtdarMX1bOKhmDAPFkpA6l/M32yJzv5lgUKuQhGhxd/CO5qrTN9IAxCE9GgvI2KTLHew7oUqjQswIZ8Xor6gHzoGodvOiTUe0GWI9IlRFYVVUF5Z5QrbOGb/UC6gLFykdq7dTLFcmekTrJ6a+rqZv4M1R/C1XrUFOoPNkuhYoNkonfy1Gcg++pHVLjKxOvCCUfeODR4iP7gWpAj5zKRuu7pFK08tJnb1grvo4IFYUlNyHQrOoFVUcrP1vLpmN6p28PECCITM021ZtRbvXP3UoiXsqd9JQqq3UylBS0ppuMHpbN6YbI6FljHajAQLnDqVz8oUd/GpSuYezAZ2p8VMdnBrmP5eScg6EcqgdZxStqg9V0fg6oDXwRUANqAwINuvwCR314NERWMugAAAAASUVORK5CYII=";