Circle Object with Stroke Renders Misaligned on Canvas in Fabric.js 6.3.0

[Arkit-Sutariya]

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

6.0.2

In What environments are you experiencing the problem?

Chrome

Node Version (if applicable)

16.14.0

Link To Reproduction

No

Steps To Reproduce

I am currently using Fabric.js version 6.3.0 in a normal HTML project. When loading and rendering a circle object created in Fabric.js 6.4.2 (via JSON) using the provided code snippet, I encounter an issue when the circle object has a shadow or stroke applied. Without shadow or stroke, the circle renders perfectly; however, when these styles are present, the circle does not render as expected.

In my code, I am passing the circle object data through fabric.util.enlivenObjects and creating a new canvas for rendering. Below is the core section of my code where the issue occurs:

`

let objectRender = [];
fabric.util.enlivenObjects(objectRender).then(async (enlivenedObjects) => {
await enlivenedObjects.forEach(async function (obj, index) {
if (obj.type == 'circle') {
obj.endAngle = 360;
}

    let shapeStickerCanvas = document.createElement("canvas");
    shapeStickerCanvas.id = "shapeStickerCanvas";
    document.body.append(shapeStickerCanvas);
    let shapeCanvas = new fabric.Canvas(shapeStickerCanvas);

    shapeCanvas.setWidth(pageJSON.width);
    shapeCanvas.setHeight(pageJSON.height);

    if (obj.type == 'circle') {
        const radius = obj.radius;
        obj.set({
            radius: radius
        });
        obj.setCoords();
    }
    shapeCanvas.renderAll();
});

});
`

Expected Behavior

As per image i want output like above

Actual Behavior

Actual output is like above image so how can i achieve my excepted output.

I would appreciate any guidance or recommendations on how to resolve the issue of misaligned rendering when the circle object has shadow or stroke applied, particularly when working between different Fabric.js versions.

Error Message & Stack Trace

No response

[asturur]

there is no json or working code, so no one can help.
Please make a jsfidle or a codepen or something that can be seen in action

[Arkit-Sutariya]

@asturur
Apologies for the confusion. Here is the link to the working code on CodeSanBox

Please take a look, and I would appreciate it if you could provide a solution based on this.
Below is expected output image

[asturur]

You come up with a size of 650 but is completely unclear why. To me is not 650 is a large number you don't provide the reason why you think it should fit in 650.

[Arkit-Sutariya]

As per the project requirements, I am generating a PDF that matches the dimensions of the canvas flyer, which in our tool is set to 650x650. To achieve this, I am using the design's JSON data to recreate the canvas, capturing a screenshot of the canvas using a third-party tool, and then creating the PDF from that screenshot.

While the design on the canvas appears as expected, I am encountering some positioning issues when generating the PDF.

[asturur]

You could have some zoom added to the canvas from your application, this zoom is not captured in the export. If you want your object to fit in an arbitrary size of 650by650 you have to zoom in or out till they perfectly fit.
With the data you are providing your canvas is 650 by 650 maybe in the app but the objects inside are larger than that.

[Arkit-Sutariya]

My canvas size is 650x650 with a zoom level of 100%, which corresponds to a zoom level of 1 in Fabric.js.

When I add circles, one has both a stroke and a strokeWidth, another has a shadow, and a third has neither a stroke nor shadow. The design saves perfectly in my tool. However, when I render the design again using my code, I encounter a positioning issue, even though the canvas remains at 100% zoom, the same level as when I saved it.

Additionally, our tool supports canvas sizes ranging from 50px to 5000px, with zoom levels between 0.1 and 3. Given this flexibility, I need a solution that resolves this issue without relying on the canvas's zoom level

[asturur]

As i said before, this would work out of the box.
Please show a full save/reload cycle that is not working. You are coming with half of the problem, just the data and a declaration that it was indeed 650px.
Please make it fail from start to finish so we can look at it.

The data imho has been clearly manipulated / edited incorrectly

      radius: 141.84300000000002,
      startAngle: 0,
      endAngle: 360,
      counterClockwise: false,
      type: "circle",
      version: "6.4.2",
      originX: "left",
      originY: "top",
      left: 338,
      top: 68,
      width: 390,
      height: 390,

width and height of 390 but a radius of 141.84300000000002 is wrong and won't work