Add shadow to a group of objects

StackOverflow https://stackoverflow.com/questions/23209812

  •  07-07-2023
  •  | 
  •  

Question

How do I add a shadow to a group of objects, this is not work

        var canvas = new fabric.Canvas('container');
    var text = new fabric.Text('hello world', {
      fontSize: 30
    });

//create circle

    var circle = new fabric.Circle({
        radius: 100,
        fill: '#eef',
        scaleY: 0.5,
    });


    var circle2 = new fabric.Circle({

        radius: 50,
        left: 100,
        fill: '#345666',
        scaleY: 0.5,

    });

//create group var group = new fabric.Group([circle,circle2], {

        angle: -10,
        shadow:{ color:"rgb(0,0,0)",blur:20,offsetX:10,offsetY:10 }
    });

    canvas.add(group);
Was it helpful?

Solution

I know this was a while ago, but it seems shadows on fabric.Group objects is not possible, only on individual objects. Instead why not apply the shadow on the object that forms the background. So in this case it would be:

var newCanvas = new fabric.Canvas('c', {
  isDrawingMode: false
});

newCanvas.setWidth(460);
newCanvas.setHeight(365);

var circle = new fabric.Circle({
  radius: 100,
  fill: '#990000',
  originX: 'center',
  originY: 'center',
  shadow: 'rgba(0,0,0,0.4) 5px 5px 7px'
});

var circle2 = new fabric.Circle({
  radius: 50,
  fill: '#000000',
  originX: 'center',
  originY: 'center',
});

var group = new fabric.Group([circle, circle2], {
  originX: 'center',
  originY: 'center',
  left: 225,
  top: 185
});

newCanvas.add(group);
newCanvas.renderAll();
* {
  box-sizing: border-box;
}
canvas {
  border: 1px solid #000000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/fabric.js/1.4.8/fabric.min.js"></script>

<body>
  <div>
    <canvas id="c"></canvas>
  </div>
</body>

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top