JSFiddle - React, Tailwind, and code Playground

HTML

<div class="swatch" style="width: 250px; height: 50px; background-color: #fae"></div>
<img class="otherObjects" 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 drawSwatches(currentSwatch){
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);
    }
    img.src = url;
}

//draw all the swatches
var swatches = document.getElementsByClassName("swatch");
for(var i=0; i<swatches.length; i++){
    drawSwatches(swatches[i]);
}
/* ############ breakpt required here ############## */
//simulate using alert for fiddle
//alert("simulated breakpt");

//now draw some other objects
function drawOtherObjects(obj, x, y, width, height){
    ctx.drawImage(obj, x, y, width, height);
}

var otherObjects =  document.getElementsByClassName("otherObjects");
for(var i=0; i<otherObjects.length; i++){
    drawOtherObjects(otherObjects[i], 0, 0, 100, 100);
}

//document.getElementById("draw").addEventListener("click",drawStuff);