Search code examples
javascriptcanvasfabricjsshadow

fabric js set shadow to null after canvas render

I am setting the shadow to fabric js rectangle using 

o.setShadow("1px 1px 15px yellow");

Now the shadow is set to the respective rectangle where o is the current object But I regenerate the rectangle using a timeout after every 30 second the new rectangle gets generated but the shadow is still there on the old place so if rectangle no had shadow when the rectangle gets regenerated the shadow is still there but ideally all the shadows should be removed.

I tried

o.setShadow(null) and o.setShadow(0px 0px 0px) and canvas.renderAll()

But it does not work all the new rectangle does not have a shadow property has a shadow of null but the shadow is still there I need to remove the shadow altogether in the next iteration of the settimeout. I Am using the 3.4.0 version of the Fabric js.

Solution

  • Do obj.shadow = null; followed by canvas#requestRenderAll, it will remove the shadow of the object.

    DEMO

    const canvas = new fabric.Canvas('canvas');
const square = new fabric.Rect({
  width: 50,
  height: 50,
  left: 50,
  top: 50,
  fill: '#000'
});
square.setShadow("1px 1px 15px yellow");
canvas.add(square);
setTimeout(() => {
  square.shadow = null;
  //or square.setShadow(null);
  canvas.requestRenderAll();
},1500);
    canvas {
  border : 1px solid;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.4.0/fabric.js"></script>
<canvas id="canvas"></canvas>