JSFiddle - React, Tailwind, and code Playground

by Exceeder

HTML

<canvas id="canvas"></canvas>

<div class="wrapper">
<svg id="tmpSvg" version="1.1"
     xmlns="http://www.w3.org/2000/svg"
     width="200" height="200">
  <style>
    circle {
      fill-opacity: 0.5;
      stroke-width: 4;
      fill: #3080d0;
      stroke: #3080d0;
    }
  </style>
  <circle id="my-circle" cx="50" cy="50" r="30" />
</svg>
</div>

CSS

.wrapper {
    display:none;
}

#canvas {
    width:400px;
    height:300px;
}

JavaScript

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");



var svg = document.getElementById('tmpSvg')
var blueCircle = (new XMLSerializer).serializeToString(svg);
var img = new Image();
img.src = "data:image/svg+xml;charset=utf-8,"+blueCircle;
context.drawImage(img,0,0);

redCircle = blueCircle.replace(/#3080d0/g,'#e05030');
img = new Image();
img.src = "data:image/svg+xml;charset=utf-8,"+redCircle;
context.drawImage(img,10,10);