Discrepancy in Circle Element Stroke Width and Position Between Preview and Render in Fabric.js Canvas

[yashChapaniOB]

When applying a stroke width of 50 to a circle element in the canvas, a noticeable inconsistency occurs between the stroke width displayed during the preview and the stroke width after rendering the canvas. The stroke appears correctly during the preview, but after rendering, there is a visible discrepancy in the stroke width, making it appear different.

The stroke width appears to change between the preview stage and after the canvas is fully rendered, leading to a mismatch in visual output. Due to this issue also affected on the that element position.

Before The Render Canvas:

After The Render Canvas:

This is my Canvas JSON data while saving the the Canvas

 "canvasJSON": {
        "version": "6.3.0",
        "objects": [
          {
            "radius": 358.38075,
            "startAngle": 0,
            "endAngle": 360,
            "counterClockwise": false,
            "type": "circle",
            "version": "6.3.0",
            "originX": "left",
            "originY": "top",
            "left": -143,
            "top": 2,
            "width": 455,
            "height": 455,
            "fill": "#000000",
            "stroke": "#004AAD",
            "strokeWidth": 50,
            "strokeLineCap": "butt",
            "strokeDashOffset": 0,
            "strokeLineJoin": "miter",
            "strokeUniform": false,
            "strokeMiterLimit": 4,
            "scaleX": 1,
            "scaleY": 1,
            "angle": 0,
            "flipX": false,
            "flipY": false,
            "opacity": 1,
            "shadow": {
              "color": "#000000ff",
              "blur": 0,
              "offsetX": 0,
              "offsetY": 0,
              "affectStroke": false,
              "nonScaling": false,
              "type": "shadow"
            },
            "visible": true,
            "backgroundColor": "",
            "fillRule": "nonzero",
            "paintFirst": "fill",
            "globalCompositeOperation": "source-over",
            "skewX": 0,
            "skewY": 0,
            "id": 866932,
            "excludeFromExport": false,
            "isLocked": false,
            "element_type": "basicShape",
            "isObjectcenter": false,
            "objectCaching": true,
            "index": 0
          }
        ]
      },

This is My Canvas JSON after the Re-Render Canvas JSON data getting

{
    "61510": {
        "background_json": {
            "background_image": "",
            "background_color": ""
        },
        "sample_image": "",
        "height": 800,
        "width": 650,
        "display_height": "800",
        "display_width": "650",
        "display_size_type": "px",
        "user_template_category": "Custom Size",
        "is_featured": 0,
        "is_portrait": 0,
        "page_id": 61510,
        "page_index": 1,
        "canvasJSON": {
            "version": "6.3.0",
            "objects": [
                {
                    "radius": 358.38075,
                    "startAngle": 0,
                    "endAngle": 360,
                    "counterClockwise": false,
                    "type": "circle",
                    "version": "6.3.0",
                    "originX": "left",
                    "originY": "top",
                    "left": -143,
                    "top": 2,
                    "width": 455,
                    "height": 455,
                    "fill": "#000000",
                    "stroke": "#004AAD",
                    "strokeWidth": 50,
                    "strokeLineCap": "butt",
                    "strokeDashOffset": 0,
                    "strokeLineJoin": "miter",
                    "strokeUniform": false,
                    "strokeMiterLimit": 4,
                    "scaleX": 1,
                    "scaleY": 1,
                    "angle": 0,
                    "flipX": false,
                    "flipY": false,
                    "opacity": 1,
                    "shadow": {
                        "color": "#000000ff",
                        "blur": 0,
                        "offsetX": 0,
                        "offsetY": 0,
                        "affectStroke": false,
                        "nonScaling": false,
                        "type": "shadow"
                    },
                    "visible": true,
                    "backgroundColor": "",
                    "fillRule": "nonzero",
                    "paintFirst": "fill",
                    "globalCompositeOperation": "source-over",
                    "skewX": 0,
                    "skewY": 0,
                    "id": 866932,
                    "excludeFromExport": false,
                    "isLocked": false,
                    "element_type": "basicShape",
                    "isObjectcenter": false,
                    "objectCaching": true,
                    "index": 0
                }
            ]
        },
        "threedObject": [],
        "object_orderList": [
            866932
        ],
        "svg_json": [],
        "tool_json": []
    }
}

this is My Canvas JSON while getting data preview for the loadFromJSON method to loadJSon data in canvas and getActiveObject method to retrieve that object data

{
  "radius": 358.38075,
  "startAngle": 0,
  "endAngle": 360,
  "counterClockwise": false,
  "type": "circle",
  "version": "6.3.0",
  "originX": "left",
  "originY": "top",
  "left": -143,
  "top": 2,
  "width": 716.7615,
  "height": 716.7615,
  "fill": "#000000",
  "stroke": "#004AAD",
  "strokeWidth": 50,
  "strokeDashArray": null,
  "strokeLineCap": "butt",
  "strokeDashOffset": 0,
  "strokeLineJoin": "miter",
  "strokeUniform": false,
  "strokeMiterLimit": 4,
  "scaleX": 1,
  "scaleY": 1,
  "angle": 0,
  "flipX": false,
  "flipY": false,
  "opacity": 1,
  "shadow": {
    "color": "#000000ff",
    "blur": 0,
    "offsetX": 0,
    "offsetY": 0,
    "affectStroke": false,
    "nonScaling": false,
    "type": "shadow"
  },
  "visible": true,
  "backgroundColor": "",
  "fillRule": "nonzero",
  "paintFirst": "fill",
  "globalCompositeOperation": "source-over",
  "skewX": 0,
  "skewY": 0,
  "id": 866932,
  "excludeFromExport": false,
  "isLocked": false,
  "element_type": "basicShape",
  "index": 0,
  "isObjectcenter": false,
  "objectCaching": true
}

[asturur]

You are probably doing something with code that you are not showing. Data only won't make anyone solve this issue.
You are either changing paintFirst or resizing the circle. Not sure also what does it mean preview/fullcanvas

[asturur]

Duplicate of #10199

[yashChapaniOB]

Bro this is not duplicated, #10142 That is shadow issue and this ticket is the border-size issue

[asturur]

It's a duplicate because same type of issue ( radius and width/height off sync ) still not reproducible case end to end flow. Same incomplete context to reproduce the problem.

[asturur]

I linked the wrong issue