JSFiddle - React, Tailwind, and code Playground

by Dinesh Singh

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.min.js"></script>
<canvas id='canvas' width="500" height="400" style="border:#000 1px solid;"></canvas>

JavaScript

canvas = new fabric.Canvas('canvas');
var shadow = {
    color: 'rgba(0,0,0,0.6)',
    blur: 20,    
    offsetX: 10,
    offsetY: 10,
    opacity: 0.6,
    fillShadow: true, 
    strokeShadow: false
}

var s = '<svg width="100" height="100"><polygon points="30 0, 70 0, 99 33, 99 66, 70 99, 30 99, 0 66, 0 33"  fill="#bbb"/></svg>'
fabric.loadSVGFromString(s, function(objects, options) {
  var shape = fabric.util.groupSVGElements(objects, options);
//shape.setShadow("10px 10px 5px rgba(94, 128, 191, 0.5)");
  if (shape.isSameColor && shape.isSameColor() || !shape.paths) {
            console.log('shape');
            shape.set({
                strokeWidth: 3,
                stroke: '#000'
            });
        }
        if (shape.paths) {
            console.log('shape path');
            /*for (i in shape.paths) {
                shape.paths[i].set({
                    strokeWidth: strokewidth,
                    stroke: strokecolor
                });
            }*/
            allObjects = shape.paths;
        $.each(allObjects, function(key, value) {
             value.set({
                    strokeWidth: 3,
                stroke: '#000'
                });
        });
        }
        
//shape.setShadow("10px 10px 5px rgba(94, 128, 191, 0.5)");
shape.setShadow(shadow);

var rect = new fabric.Rect({
    left: 300,
    top: 150,
    width: 150,
    height: 150,
    strokeWidth: 3,
    stroke: '#000',
    fill: '#29477F'
});
rect.setShadow(shadow);

  canvas.add(shape, rect).renderAll();
});