JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/fabric.js/1.2.0/fabric.all.min.js"></script>
<h1>canvas</h1>
<canvas style="left: -300px; border: 1px dotted;   " height="585" width="400" id="c"></canvas>
<input type="button" id="svg3" value="set background" />
<input type="button" id="color" value="Change Image Color" />

JavaScript

function setBackgroundColor(color) {
        if (background.isSameColor && background.isSameColor() || !background.paths) {
            background.setFill(color);
        } else if (background.paths) {
            for (var i = 0; i < background.paths.length; i++) {
                background.paths[i].setFill(color);
            }
        }
    }

var canvas = new fabric.Canvas('c');
var background;
    
    
$("#svg3").click(function() {
    fabric.loadSVGFromURL('http://upload.wikimedia.org/wikipedia/en/c/cd/-Islandshreyfingin.svg', 
        function (objects, options) { 
            background = fabric.util.groupSVGElements(objects, options);
         

            background.set({
                left: canvas.width/2,
                top: canvas.height/2,
                scaleY: canvas.height / background.width,
                scaleX: canvas.width / background.width,
                 selectable: false
            });
            
            setBackgroundColor('red');
            
            canvas.add(background);
            canvas.renderAll();
        });
});
    
$("#color").click(function(){
    setBackgroundColor('blue');
    canvas.renderAll();
});