[Bug]: Shadow for underlined text not working properly when objectCaching is false

[niketaOptimumnbrew]

CheckList

• I agree to follow this project's Code of Conduct
• I have read and followed the Contributing Guide
• I have read and followed the Issue Tracker Guide
• I have searched and referenced existing issues and discussions
• I am filing a BUG report.
• I have managed to reproduce the bug after upgrading to the latest version
• I have created an accurate and minimal reproduction

Version

5.3.0

In What environments are you experiencing the problem?

Chrome

Node Version (if applicable)

None

Link To Reproduction

https://jsfiddle.net/Niketa_patel/as5evzt2/5/

Steps To Reproduce

1. shadow not apply to text with underline.
2. check the fiddle to reproduce the issue.

Expected Behavior

• shadow should work with underline text when objectCaching is false.
• Both text and underline should have shadow
• check screen short:
  

Actual Behavior

• shadow is not work with underline text when objectCaching is false.
• Only underline has shadow
• check screen short:
  

[ShaMan123]

If you are not using clip paths in yuor app I suggest dumping fabric's render loop in favor of a simple once that doesn't require caching (revert to context isolation perhaps)

[niketaOptimumnbrew]

If you are not using clip paths in yuor app I suggest dumping fabric's render loop in favor of a simple once that doesn't require caching (revert to context isolation perhaps)

@ShaMan123 I'm not using clip paths in my app but can you please clarify more about what you are trying to say?
Thank you !

[ShaMan123]

Sure, sorry for being short, didn't feel like writing something redundant.
I am not 100% this is your use case so I suggest first you look at this suspicious line:

fabric.js/src/shapes/Text/Text.ts

Line 1642 in 6b6a5fc

this._removeShadow(ctx);

Before going into rendering I would turn off caching. In most cases it is better apart from panning and transforming an object. The latter can be mitigated by rendering only the dirty rect but that is a different topic altogether.

I will post more about rendering if you want to look into it

[niketaOptimumnbrew]

Sure, sorry for being short, didn't feel like writing something redundant. I am not 100% this is your use case so I suggest first you look at this suspicious line:

fabric.js/src/shapes/Text/Text.ts

Line 1642 in 6b6a5fc

this._removeShadow(ctx);

Before going into rendering I would turn off caching. In most cases it is better apart from panning and transforming an object. The latter can be mitigated by rendering only the dirty rect but that is a different topic altogether.

I will post more about rendering if you want to look into it

@ShaMan123 thank you for replay.

yes Please post more about rendering
and can you please tell me that how to exactly resolve this shadow issue?

Like which property should i use to resolve that?

[ShaMan123]

I would first investigate this issue a bit more

fabric.js/src/shapes/Text/Text.ts

Lines 602 to 611 in 6b6a5fc

	_render(ctx: CanvasRenderingContext2D) {
	const path = this.path;
	path && !path.isNotVisible() && path._render(ctx);
	this._setTextStyles(ctx);
	this._renderTextLinesBackground(ctx);
	this._renderTextDecoration(ctx, 'underline');
	this._renderText(ctx);
	this._renderTextDecoration(ctx, 'overline');
	this._renderTextDecoration(ctx, 'linethrough');
	}

_renderTextDecoration calls _removeShadow
_renderText is called afterwards and seems to me that the shadow remains unset on the context but I don't understand why object caching makes a difference

I would try to disable the line and see what happens

[ShaMan123]

fabric object rendering is the part I dislike most about fabric.
It has 3/4 methods that call each other recursively so it is very hard to understand what is going on

Lifecycle without caching:

• render
• drawObject => group will iterate over children and call render
• _render

Lifecycle with caching:

• render
• shouldCache => has weird stuff going on that cause bugs including shadow disabling under group (willDrawShadow)
• renderCache
• drawObject => group will iterate over children and call render
• _render
• _drawClipPath => move to shouldCache with clipPath

It is hard even to write this down...

[niketaOptimumnbrew]

fabric object rendering is the part I dislike most about fabric. It has 3/4 methods that call each other recursively so it is very hard to understand what is going on

Lifecycle without caching:

• render
• drawObject => group will iterate over children and call render
• _render

Lifecycle with caching:

• render
• shouldCache => has weird stuff going on that cause bugs including shadow disabling under group (willDrawShadow)
• renderCache
• drawObject => group will iterate over children and call render
• _render
• _drawClipPath => move to shouldCache with clipPath

It is hard even to write this down...

@ShaMan123 Thank you for giving me deep understanding.

Their is no solution for shadow?
It's working when i have version 1.7.22 and now when moved to latest version(5.3.0) then it's not working.

Can you please help me with that?
Thank you :)

[ShaMan123]

As I said try disabling the line I mentioned.

[niketaOptimumnbrew]

As I said try disabling the line I mentioned.

Thank you @ShaMan123 , It's working now.

[asturur]

Object caching makes a difference because is the cache that is doing the shadow all together.
This was an issue also before caching in which decoration didn't have shadow because it would drop shadow over the text

Caching or not caching this kind of shadow should enforce drawing isolation that todays is the same as caching

[ShaMan123]

@asturur v5.x label might be misleading, the suspected line exists on master

[asturur]

but the issue and the samples are on 5.x
The pr that fixes it week be also probably different. We should have a seprate issue for current master if we can replicate.

[asturur]

Check if this fixes the issues: #9965
I won't publish it if i don't get feedback