JSFiddle - React, Tailwind, and code Playground

HTML

<div id="mySwatch" style="width: 250px; height: 50px; background-color: #fae"></div>
<img id="myImg" src="data:image/gif;base64,R0lGODlhDwAPAKECAAAAzMzM/////
wAAACwAAAAADwAPAAACIISPeQHsrZ5ModrLlN48CXF8m2iQ3YmmKqVlRtW4ML
wWACH+H09wdGltaXplZCBieSBVbGVhZCBTbWFydFNhdmVyIQAAOw=="
 width="150" height="150"/>
<canvas id="myCanvas" width="300" height="200" style="border: 1px solid #000"></canvas>

JavaScript

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

//hard code variables for example
var vw=300, vh=200, x=20, y=50, w=250, h=50; rx=10, ry=5, bg="#fae", theta=15, midptX=100, midptY=120, blur=5;

//helper function to draw swatch objects
function drawSwatch(currentSwatch, resolve){
    var data = '<svg xmlns="http://www.w3.org/2000/svg" width="'+vw+'" height="'+vh+'">'+
    '<defs>'+
    '<filter id="f1">'+
    '<feGaussianBlur in="SourceGraphic" stdDeviation="'+blur+'" />'+
    '</filter>'+
    '</defs>'+
    '<rect class="shape" x="0" y="0" width="'+w+'" height="'+h+'" rx="'+rx+'" ry="'+ry+'" transform="translate('+x+','+y+') rotate('+theta+','+midptX+','+midptY+')" fill="'+bg+'" filter="url(#f1)"></rect>'+
    '</svg>';

    //now draw the svg to canvas
    var svg_data = encodeURIComponent(data);
    // create a dataURI version
    var url = 'data:image/svg+xml; charset=utf8, ' + svg_data;
    var img = new Image();
    img.onload = function(){
      ctx.drawImage(img, 0, 0, vw, vh);
      setTimeout(resolve, 2000);
    }
    img.src = url;
}

//draw svg
var promise = new Promise(function(resolve){
  drawSwatch(document.getElementById("mySwatch"),resolve);
});

promise.then(function(){
  ctx.drawImage(document.getElementById("myImg"),0,0,150,150);
});