[Bug]: shadow appears on the upper side, and the underline displays on the backside of a Textbox 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?

Firefox, Chrome, Safari

Node Version (if applicable)

14.20.0

Link To Reproduction

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

Steps To Reproduce

1. Please check above fiddle to reproduce the issue.
2. shadow will display on text.

Expected Behavior

• should show shadow text backside of text, don't show shadow text over the text or over the underline.

Actual Behavior

• shadow text show over the text underline rather than displaying backside of text

Error Message & Stack Trace

No response

[asturur]

@niketaOptimumnbrew when drawing without caching the drawing operations are one by one, and the shadow is applied each time. You need caching ( isolation ) enabled if you want shadow to appear correctly.
What is the issue with enabling caching?

[niketaOptimumnbrew]

@niketaOptimumnbrew when drawing without caching the drawing operations are one by one, and the shadow is applied each time. You need caching ( isolation ) enabled if you want shadow to appear correctly. What is the issue with enabling caching?

with enable caching object not update on each and every action.
I want to update object with all the action of object like scale , zoom etc.

font also show blur with enable caching.

@asturur is their any solution for disable caching?

[asturur]

@niketaOptimumnbrew you are putting yourself in a series of issues because you don't use caching.
Please which are those things that do not update cache?
Let's fix caching, not using time on things that can't work without caching.

[niketaOptimumnbrew]

@niketaOptimumnbrew you are putting yourself in a series of issues because you don't use caching. Please which are those things that do not update cache? Let's fix caching, not using time on things that can't work without caching.

• Text with enable caching.

• Text with disable caching.

I'm using textbox for text rendering.
@asturur Please check above two images with caching enable and disable.

[asturur]

I havew no idea how you are creating that text and why in your opinion caching is at the heart of the issue.
You are probably not triggering a cache invalidation in some way.

[niketaOptimumnbrew]

I havew no idea how you are creating that text and why in your opinion caching is at the heart of the issue. You are probably not triggering a cache invalidation in some way.

Let me explain to you about how i render text on canvas.

Steps:

1. First I render text on canvas.
2. load font after text render.
3. Update textbox width according font and fontfamily.

Example:

obj = {
                left: Math.round(element.xPos),
                top: Math.round(element.yPos),
                fontWeight: element.fontWeight,
                fill: element.color,
                opacity: element.opacity / 100,
                cursorColor: "blue",
                fontSize: Math.round(element.size),
                textAlign: alignment,
                lockScalingX: false,
                lockScalingY: false,
                hasRotatingPoint: false,
                transparentCorners: true,
                centeredRotation: true,
                lineHeight: 1.16,
                charSpacing: 0,
                shadow: {
                    "color": element.shadowColor,
                    "blur": element.shadowRadius,
                    "offsetX": element.shadowDistance,
                    "offsetY": element.shadowDistance
                },
                fontFamily: tmp_fontName,
                isLocked: false,
                index: element.index,
                isTextwidthmdfy: false,
                isObjectcenter:false,
                lockScalingFlip:true,
                iswimdfybymcontrol:true,
            }
let iTextSample = new fabric.Textbox(element.text, obj);
 let wid_ = this.calcTextboxwidth(iTextSample);
        iTextSample.set({
            width:wid_
        })
this.canvas.add(iTextSample);
let json = this.canvas.toJSON(CUSTOM_ATTRIBUTES);
 this.loopAllFontFirst({ canvasJSON: json }).then(async (result) => {
 this.reRenderServerTextProperty();
this.canvas.renderAll.bind(this.canvas);
})

// Caculate text width
    calcTextboxwidth(object)
    {
    latestFabric.fabric.util.clearFabricFontCache();
    var tempText = new latestFabric.fabric.Text(object.text, {
        fontSize: object.fontSize,
        fontWeight: object.fontWeight,
        fontFamily: object.fontFamily,
        charSpacing: object.charSpacing,
        textBackgroundColor:object.textBackgroundColor,
        fill:object.fill,
        stroke:object.stroke,
        strokeWidth:object.strokeWidth,
        objectCaching:false,
        scaleX:object.scaleX,
        scaleY:object.scaleY,
        shadow:object.shadow,
        borderColor:object.borderColor,
        shadow_theme_index:object.shadow_theme_index,
        height:object.height,
        textAlign:object.textAlign,
        lineHeight:object.lineHeight,

    });
    // Calculate the width of the text
    var textWidth = this.isSafariBrowser ? tempText.calcTextWidth() + 1 : tempText.calcTextWidth() + 1;
    tempText = null;
    return textWidth;
    }
    reRenderServerTextProperty() {
        this.canvas.getObjects('textbox').forEach(async object => {
            let wid_ = await this.calcTextboxwidth(object);
            object.width = wid_;
        });
        this.canvas.renderAll();
    }

With this scenario , I'm getting issue with enable caching as you can see in above screenshot.

@asturur Please help if I missing anything in it.

[asturur]

What you show seems to be a text width + wrapping issue. I m not sure why object caching should play a role there

[niketaOptimumnbrew]

What you show seems to be a text width + wrapping issue. I m not sure why object caching should play a role there

@asturur Is it possible when I update object width with enable caching then object update but not the text?