Regression of free drawing pixel shifting bug #5705

newtriks · 2019-05-21T18:27:20Z

Version

2.4.0

Test Case

http://jsfiddle.net/mw1oybvk/

also evident on http://fabricjs.com/freedrawing

Information about environment

Nodejs or browser? Browser
Which browsers? Chrome

Steps to reproduce

Draw

Expected Behavior

On mouse up, drawn line remains at the exact same coordinates on canvas

Actual Behavior

On mouse up, drawn line shifts coordinates up and left on canvas. Regression of this issue: #4646

asturur · 2019-05-21T21:38:50Z

i think is the position fix done a couple of days ago.
I can fix this quickly and add a test in some way for free drawing.

asturur · 2019-05-21T21:40:07Z

Thanks for reporting the bug

newtriks · 2019-05-22T09:22:39Z

@asturur nw and thanks!

coonmoo · 2019-05-25T12:56:17Z

Any chance how we can add some custom code in our app to fix this behaviour? Need to publish a prototype next week and can't seem to figure it out on my own
Thanks a lot for the awesome work!

asturur · 2019-05-25T15:33:33Z

i think is easy to fix, just i did not have time.

coonmoo · 2019-06-01T08:38:13Z

Thanks a lot for the fast processing of the issue. I just pulled the source and made a build. Checked the dist file to verify it has the proper changes.
But after using the freedraw feature I still experience the same reported issue. Is there anything else we need to set/do?

coonmoo · 2019-06-01T08:56:09Z

@asturur when I draw a line the line is 15px under the crosshair's center (line is not originating from the center of the crosshair). Adding this code to the object:added event prevent's the line from jumping after drawing, but the drawing itself is still offset.

event.target.set({
top: event.target.top + 15
});

asturur · 2019-06-01T22:51:47Z

i do not see the issue, can you build a fiddle on fabric 3.1 that show the problem?

coonmoo · 2019-06-03T10:39:28Z

I found it out today since I could not reproduce on fiddle. I had the canvas "top:-15px;" offsetted in the css...
Thanks for the fix!

ToshipSo · 2019-06-11T06:39:17Z

I'm facing the same issue on version 3.1.0.
I'm using the free drawing mode with isDrawingMode = true.
The free drawing seems to be working fine during the mousedown event but upon the mouseup event the drawing seems to shift a bit, mostly up or left.

I've put an example over here.
http://jsfiddle.net/bqgr2cdm/

asturur · 2019-06-22T07:15:06Z

that is because you are giving a string to something that expect a number

leeharr · 2020-11-17T14:12:20Z

I was seeing this today on Fabric.js version 4.2.0

The easy fix was to remove the margin: xxxx from the css for the canvas.

Not sure if it is a bug (that css on the canvas disrupts reading the position of the free drawing cursor) but if that is a problem you are having, try removing the css from the canvas, wrapping the canvas in a div, and styling the div instead.

asturur · 2020-11-17T14:33:30Z

can you reproduce it on current 4.2.0?

leeharr · 2020-11-17T17:53:30Z

Here is a complete example that shows the shifting behavior with fabric 4.2.0:

<!DOCTYPE html>
<html>
  <head>
    <title>Canvas Free Draw Bug</title>
    <script type='text/javascript' src='/static/js/fabric-4.2.0.js'></script>
    <style type='text/css'>
        #sheet {
            border:1px solid black;
            margin: 2em;
        }
    </style>
    <script type='text/javascript'>
        window.onload=function(){
            var canvas = new fabric.Canvas('sheet');
            canvas.isDrawingMode = true;
            canvas.freeDrawingBrush.width = 5;
            canvas.freeDrawingBrush.color = "#ff0000";
        }
    </script>
  </head>
  <body>
    <canvas id="sheet" width="400" height="400"></canvas>
  </body>
</html>

asturur · 2020-11-17T18:03:40Z

would you be able to have it in a jsfiddle and open an issue for it?

leeharr · 2020-11-17T18:23:43Z

Sorry. I took a quick look at jsfiddle. Not sure how to make it load the latest fabric version.

Note that even having only the border styling causes a small shift.

asturur · 2020-11-17T18:37:54Z

if you open a new issue, in the template there is linked a jsfiddle template with the latest version loaded.
http://jsfiddle.net/fabricjs/Da7SP/

leeharr · 2020-11-17T19:23:39Z

Ah. I see!

Well. In the jsfiddle, the problem does not appear. I have no idea why.

However, in the isolated example above, the problem does appear.

libovness · 2021-09-28T19:48:33Z

I am experiencing this in 4.6.0. There is no margin on the canvas as there was with @leeharr's comment. Rather it seems the brush is drawing around the cursor evenly but then shifting to the top / left of the object that's created. If I shift the top and left of the object to canvas.freeDrawingBrush.width / 2 it fixes the issues but that's not pretty. Is there something I'm missing in terms of setting something like originX or originY for the brush / object?

Fiddle here: https://jsfiddle.net/nf1rqusL/4/

libovness · 2021-09-29T20:53:23Z

added a function to fix the shift in the fiddle which you can toggle, but this is not pretty. there's gotta be something I'm missing.

const shiftDrawnObject = (object) => {
  object.top += object.strokeWidth / 2
  object.left += object.strokeWidth / 2
}

adwinwhite · 2022-11-29T13:03:42Z

Finally I figured this out.

In my case, the problem is that brush.width expects a number rather than a string which asturur also mentioned above.

It's quite confusing that a width of string value works before mouse up but not on mouse up.

For those who still land here, hope this will help~

asturur added the bug label May 21, 2019

carterw485 mentioned this issue May 23, 2019

free drawing brush strokes shift up and left #5711

Closed

asturur mentioned this issue May 25, 2019

Fix free draw positioning #5718

Merged

asturur closed this as completed in #5718 Jun 1, 2019

jtara mentioned this issue Jun 19, 2019

Free drawing segment shifted up/left on finalization #5767

Closed

ThierryNapspirit mentioned this issue Jul 25, 2019

Draw tool issue #1 - strokes change its position by itself nhn/tui.image-editor#228

Closed

leeharr mentioned this issue Nov 17, 2020

fabric.js 3.0 Brush Drawing is Offsetting After Mouse Up #5725

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Regression of free drawing pixel shifting bug #5705

Regression of free drawing pixel shifting bug #5705

newtriks commented May 21, 2019 •

edited

Loading

asturur commented May 21, 2019

asturur commented May 21, 2019

newtriks commented May 22, 2019

coonmoo commented May 25, 2019

asturur commented May 25, 2019

coonmoo commented Jun 1, 2019

coonmoo commented Jun 1, 2019

asturur commented Jun 1, 2019

coonmoo commented Jun 3, 2019

ToshipSo commented Jun 11, 2019 •

edited

Loading

asturur commented Jun 22, 2019

leeharr commented Nov 17, 2020

asturur commented Nov 17, 2020

leeharr commented Nov 17, 2020

asturur commented Nov 17, 2020

leeharr commented Nov 17, 2020

asturur commented Nov 17, 2020

leeharr commented Nov 17, 2020

libovness commented Sep 28, 2021

libovness commented Sep 29, 2021 •

edited

Loading

adwinwhite commented Nov 29, 2022

Regression of free drawing pixel shifting bug #5705

Regression of free drawing pixel shifting bug #5705

Comments

newtriks commented May 21, 2019 • edited Loading

Version

Test Case

Information about environment

Steps to reproduce

Expected Behavior

Actual Behavior

asturur commented May 21, 2019

asturur commented May 21, 2019

newtriks commented May 22, 2019

coonmoo commented May 25, 2019

asturur commented May 25, 2019

coonmoo commented Jun 1, 2019

coonmoo commented Jun 1, 2019

asturur commented Jun 1, 2019

coonmoo commented Jun 3, 2019

ToshipSo commented Jun 11, 2019 • edited Loading

asturur commented Jun 22, 2019

leeharr commented Nov 17, 2020

asturur commented Nov 17, 2020

leeharr commented Nov 17, 2020

asturur commented Nov 17, 2020

leeharr commented Nov 17, 2020

asturur commented Nov 17, 2020

leeharr commented Nov 17, 2020

libovness commented Sep 28, 2021

libovness commented Sep 29, 2021 • edited Loading

adwinwhite commented Nov 29, 2022

newtriks commented May 21, 2019 •

edited

Loading

ToshipSo commented Jun 11, 2019 •

edited

Loading

libovness commented Sep 29, 2021 •

edited

Loading