JSFiddle - React, Tailwind, and code Playground

by Swivelgames

HTML

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

<svg id="mySVG" xmlns="http://www.w3.org/2000/svg" version="1.1">
  <rect width="150" height="150" fill="rgb(0, 255, 0)" stroke-width="1" stroke="rgb(0, 0, 0)"/>
</svg>

CSS

canvas {
    border: 1px solid gray;
}

JavaScript

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

var svg = document.getElementById('mySVG');

var img = new Image();
img.onload = function() {
    ctx.drawImage(img, 0, 0);
}
img.src = "data:image/svg+xml;base64,"+btoa(svg.outerHTML);