JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

canvas {
  background: gray;
}

JavaScript

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

var img1 = new Image();
img1.src = 'data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32"><rect stroke="none" fill="rgb(255, 38, 0)" x="0" y="0" width="32" height="32" /><path stroke="none" fill="rgb(250, 250, 250)" d="M 0,8 L 8,8 8,-0 12,-0 12,12 0,12 0,8 Z M 0,8" /><path stroke="rgb(255, 255, 255)" stroke-width="3" stroke-linecap="round" stroke-miterlimit="10" fill="none" d="M 1.5,1.5 L 17.5,17.5" /></svg>';

ctx.drawImage(img1, 10, 10);

var img2 = new Image();
img2.src = 'data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><rect fill="#FF2600" width="32" height="32"/><path fill="#FAFAFA" d="M0,8 8,8 8,-0 12,-0 12,12 0,12 Z"/><path stroke="#FFFFFF" stroke-width="3" stroke-linecap="round" stroke-miterlimit="10" fill="none" d="M1.5,1.5 17.5,17.5"/></svg>';
ctx.drawImage(img2, 42, 10);