Free drawing on zoomed in canvas bug

[bart1337]

Issue:

When canvas is zoomed in (zoomToPoint) drawn line or point is moved few pixels away. Tested it on 370x370 image scaled to 336x336 -> when clicked on bottom right corner (370, 370) pointer returns (367,367). Adding code pen for tests. Just zoom in (scroll) and click on canvas. Drawn circle will be few pixels away from pointer.

https://codepen.io/anon/pen/EwYzjp

[asturur]

Your codepen on macos/chrome keep refreshing like crazy. please check it.

[bart1337]

Have no idea what may cause it.. What about fiddle?
https://jsfiddle.net/kjudhjgq/

[asturur]

jsfiddle is ok! could you put the buttons in english please?

[bart1337]

They're not important... forgot to remove them.

EDIT: Updated.

[asturur]

I cannot see the bug. Can you give me a clear way to reproduce the bug?

[bart1337]

Just open fiddle, zoom in (scroll up) and left click to draw. Make just one click and you will notice that the center of drawn circle is few pixels away from pointer.

[asturur]

It happens because the single click create that path that is not centered on the click.
But in general if you use free drawing as a pencil it is positioned correctly.

If you need to draw just single circles, would be better if you create a specialized brush that draw just a single circle.

I do not think i have something to fix here.
If you think something is wrong and i missed it, let's continue the topic

[asturur]

Probably fixing the code and ermoving the Q step, would fix the issue.

[bart1337]

Well it is not just about circles, when you draw a line the center of it is few pixels away. That may be annoying when you need to draw line close to something

[asturur]

Is not lack of good will. I cannot see this de-centering. Please show me a gif or something where i can see the full process.

[asturur]

wait i see a high high zoom level there is a displacemente

[bart1337]

Yes, scroll up to maximum zoom and then to even increase the displacement move to the bottom right of canvas (shift + mouse move).

[bart1337]

Probably further away from center the bigger gets displacement.

[asturur]

i did not notice you are on 1.7.18

This needs custom investigation and fix. 2.0 beta version is ok.

[bart1337]

Getting same result on 2.0. Also when I end drawing a path (mouse up) it is moved few pixels away (even without zooming). That's why I did not use it.

[asturur]

Got a nice fix for 2.0 at least avoiding the small lines and creating good circles.

Sometimes is possible to do something like that:

sort of triggering a mouse move without movement, or a so small movement that there is not change in coords in float, and the drawing of chrome gets crazy.

[asturur]

This is not solved.
While other defect are solved, in your fiddle, even simplified this problem occurs.
https://jsfiddle.net/kjudhjgq/3/

[asturur]

ok is the border.
Do not apply style to the canvas with the border.
Css will shrink the canvas in a lesser space to make space for the border. that half pixel pixel of border at the edged, make so at high zoom level to get a big displacement.

[bart1337]

Removed borders, outlines and everything and looks like it is smaller displacement now, but still exists :(
EDIT:Hmm it must be something else with my code then. Removed border on fiddle and it's okay.

EDIT2: Okay it was because of resizing canvas to sizes like 200.XX px. Rounded it and it is now okay.

[titusfx]

@bart1337 did you fix the problem? I've been having the same issue, I'm drawing lines ok, but when I do zoom, and then I come back to initial zoom, the problem persists. And I'm not using free drawing. I'm doing this example:
First I started drawing lines and then follow the tutorial of this link http://fabricjs.com/fabric-intro-part-5 and then the pointer is shifted by a good amount. Event going back to zoom=1