You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
I have searched and referenced existing issues, feature requests and discussions
I am filing a FEATURE request.
Description
In Fabric.js version 6.3.0, when applying a shadow to a transparent circle,Rect the shadow appears inside the circle,rect as well, instead of being limited to the outer area of the circle,Rect. The desired behavior is for the shadow to be rendered outside the circle's or Rect's boundary, without affecting the inner transparent area.
Current Behavior
Currently, when a shadow is applied to a Rect or Circle, the shadow is visible within the object's boundary, which includes the transparent areas. This behavior deviates from the expected result, where the shadow should be projected outside the shape's edge, leaving the inner transparent regions unaffected.
that is not how shadow for the canvas works sadly and there isn't a performing fix that makes sense.
You would have to draw the shapes twice, one normally and one with global composite operation set to copy.
That would also delete anything that is under the shape with the shape itself.
CheckList
Description
In Fabric.js version 6.3.0, when applying a shadow to a transparent circle,Rect the shadow appears inside the circle,rect as well, instead of being limited to the outer area of the circle,Rect. The desired behavior is for the shadow to be rendered outside the circle's or Rect's boundary, without affecting the inner transparent area.
Current Behavior
Currently, when a shadow is applied to a Rect or Circle, the shadow is visible within the object's boundary, which includes the transparent areas. This behavior deviates from the expected result, where the shadow should be projected outside the shape's edge, leaving the inner transparent regions unaffected.
Current State
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: "#ffffffff"
selectionDashArray: [],
clipPath: undefined,
excludeFromExport: false,
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();
Expected Behavior
The shadow should be rendered outside the Rect or Circle boundaries, not within the shape's transparent inner area.
Additional Context
No response
The text was updated successfully, but these errors were encountered: