[Bug]: My canvas like a drawing page here im facing an issue that i draw a polyline in down and them i want show the preview of the line when mouse move and the preview showing fine but when i zoom with mouse wheel the preview getting disappear , then mouse wheel down the canvas zoom back to default state the preview showing fine only when the canvas zoom is greater than default state the polyline preview getting disappearing , i cant solve the issue please give me any solution for that

[SachuG3]

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?

No response

Node Version (if applicable)

None

Link To Reproduction

please check my code

Steps To Reproduce

1. add polyline in mouse down event
2. show preview in mouse move event
3. zoom in the canvas when showing the preview
4. the preview getting disappearing

Expected Behavior

canvas.current.on("mouse:down", function (e) {
let mouse = canvas.current.getPointer(e.e);
var cornerPoint = new fabric.Circle({
radius: 5,
fill: pts.length == 0 ? "rgba(255, 0, 0, 0.5)" : "rgba(0,0,255,0.5)",
left: coords?.x,
top: coords?.y,
selectable: false,
originX: "center",
originY: "center",
selectable: pts.length == 0,
name: corner_point,
id: corner_point_${pts.length + 1},
hoverCursor: url(${Pencil}) 1 17, auto
});

canvas.current?.add(cornerPoint);

polyline = new fabric.Polyline(pts, {
objectCaching: false,
name: "temp",
fill: "",
stroke: "black",
zIndex: 100,
originX: "center",
originY: "center",
selectable: false,
strokeUniform: true,
position: "absolute",
hoverCursor: url(${Pencil}) 1 17, auto,
// strokeWidth:1
});
canvas.current?.add(polyline);
polyline.points[pts?.length] = { x: coords.x, y: coords.y };
lastPt++;
mouseDown = true;
})

canvas.current.on("mouse:move", function (evt) {

if (mouseDown) {
polyline.points[lastPt - 1] = { x: mouse?.x, y: mouse?.y };
polyline.dirty = true;
canvas.current.requestRenderAll();
}

})

canvas.current.on("mouse:wheel", function (options) {

var delta = options.e.deltaY;
var pointer = canvas.current.getPointer(options.e);

var zoom = canvas.current.getZoom();
if (delta > 0) {
zoom /= 1.1;
} else {
zoom *= 1.1;
}
if (zoom > 10) zoom = 10;
if (zoom < 0.1) zoom = 0.1;

canvas.current.zoomToPoint(
{ x: options.e.offsetX, y: options.e.offsetY },
zoom
);

var canvasCenter = {
x: canvas.current.width / 2,
y: canvas.current.height / 2
};
viewportTransform = canvas.current.viewportTransform;
canvas.current.requestRenderAll();
options.e.preventDefault();
options.e.stopPropagation();
tracingLengthZoomLevel(zoom)
});

Actual Behavior

1. add polyline in mouse down event
2. show preview in mouse move event
3. zoom in the canvas when showing the preview
4. the preview getting disappearing

Error Message & Stack Trace

No response