Shadow overlap on the Shape (Circle, Rect, Line ) when object opacity decrease

[yashChapaniOB]

When decreasing an Shape's opacity in Fabric.js 6.3.0, the opacity of its shadow does not change correspondingly. This results in shadows appearing too strong relative to the object's opacity, creating an unrealistic visual effect.

 var option = {};
 option['objectCaching'] = true;
 option['isLocked'] = false;
 option['element_type'] = "basicShape";
 
 let ctx = this.canvas.getContext('2d');
 
 const shadow = new Shadow({
    affectStroke: false
    blur:0
    color:"#000000ff",
    includeDefaultValues:true,
    nonScaling:false,
    offsetX:50,
    offsetY:50,
  });
  
 var rect = new Rect({
                    angle: 0,
                    fill: #FFDE59
                    borderColor: '#0069FF',
                    borderScaleFactor: 1.5,
                    centeredScaling: false,
                    centeredRotation: true,
                    cornerSize: 15,
                    cornerColor: '#0069FF',
                    cornerStyle: 'circle',
                    shadow: shadow,
                    lockScalingFlip: true,
                    isLocked: false,
                    visible: true,
                    stroke: shape.stroke,
                    strokeDashArray: shape.strokeDashArray,
                    clipPath: undefined,
                    excludeFromExport: false,
                    strokeWidth: shape.strokeWidth ?? 0,
                    transparentCorners: false,
                    rx: 0,
                    ry:0,
                    _controlsVisibility: {
                        tl: true,
                        tr: true,
                        br: true,
                        bl: true,
                        ml: true,
                        mt: true,
                        mr: true,
                        mb: true,
                        mtr: true
                    },
                    type: 'rect',
                    element_type: 'basicShape',
                    ...option
                });
                
   this.canvas.add(rect);
   this.canvas.renderAll();

[asturur]

You setup a dark black shadow and the shadow and you get a grey shadow exactly because the shadow does decrease in intensity with opacity.
Please reframe your issue explaining what is not working as expected then we can reopen the issue.

[yashChapaniOB]

Within the given In the above image, the shadow is only visible outside the rectangle's edges when the rectangles' opacity is set to full. Well, but take a look at the pictures below. The shadow renders above the rectangle boundary when I reduce the opacity.

However, when the transparency of the rectangles is reduced, the shadow should still be rendered only outside the boundaries of the rectangle, even though the rectangle's transparency is lower. The shadow should not be visible inside the boundaries of the rectangle, regardless of the level of transparency.

[asturur]

This clarification marks the discussion as a duplicate of #10142
That is not how shadow works.
This 'should' render is more a 'i would like it to render in a different way'.
You can try to accomplish that playing with custom render code creating custom shadows or playing with global composite operation, but that is going to need a lot of understanding of the canvas operations.

[asturur]

duplicate of #10142