Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Feature]: Shadow Rendering Issue in Fabric.js 6.3.0 for Transparent Circle, Rect #10142

Open
4 tasks done
yashChapaniOB opened this issue Sep 10, 2024 · 1 comment
Open
4 tasks done

Comments

@yashChapaniOB
Copy link

yashChapaniOB commented Sep 10, 2024

CheckList

  • I agree to follow this project's Code of Conduct
  • I have read and followed the Contributing Guide
  • 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.

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();

image

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

@asturur
Copy link
Member

asturur commented Sep 10, 2024

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants