JSFiddle - React, Tailwind, and code Playground

JavaScript

var SketchBuilder = function(){};
SketchBuilder.prototype = {
    sbConf: null,
    sbImage: null,
    sbImageDims: null,
    sbCanvasElement: null,
    sbCanvas: null,
    sbBottomDim: null,
    sbSideDim: null,

    
    setup: function(ImgURL, CanvasDOMRef) {
        this.sbConf = {
            lineColor: '#000',
            lineHeight: 2,
            measureEnd: 8,
            topPadding: 16,
            sidePadding: 0,
            bottomStart: 0,
            fontSize: "bold 14px",
            fontFamily: null,
            measureBoxPadding: 20,
            mode: "front",
            labelHeight: 40
        };
        
        this.sbImage = ImgURL;
        //this.bgImage(ImgURL);
        this.setCanvas(CanvasDOMRef);
    },  
    
    setDims: function(bDim, sDim) {
        this.sbBottomDim = bDim;
        this.sbSideDim = sDim;        
    },
    
    bgImage: function(DOMObj) {
        var image_url = DOMObj.css('background-image'),image;

        // Remove url() or in case of Chrome url("")
        image_url = image_url.match(/^url\("?(.+?)"?\)$/);

        if (image_url[1]) {
            image_url = image_url[1];
            image = new Image();
            image.src = image_url;
            var ret = new Object();
            ret.width = image.width;
            ret.height = image.height;
            this.sbImageDims = ret;
        }
    },

    setCanvas: function(CanvasDOMRef) {
        this.sbCanvasElement = $('#'+CanvasDOMRef);
        var can = document.getElementById(CanvasDOMRef);
        this.sbCanvas = can.getContext('2d');
        
        this.sbCanvasElement.css("background-image","url('"+this.sbImage+"')");
        this.sbCanvasElement.css("background-positon","0px 0px");
        
        this.bgImage(this.sbCanvasElement);
        var canvasWidth = this.sbImageDims.width + (this.sbConf.sidePadding+48) + this.sbConf.measureEnd;
        var canvasHeight = this.sbImageDims.height + (this.sbConf.measureBoxPadding*2) +...