Bug in drawn line

[Aya-S]

hello I'm getting this as the jason description of a line drawn on the canvas: I want to calculate the gradient of the line so was checking x1,y1 x2, y2 and they always come back as negatives of each other.

[{'type': 'line', 'version': '3.6.3', 'originX': 'center', 'originY': 'center', 'left': 130.5, 'top': 213.5, 'width': 89, 'height': 15, 'fill': '#65EA47', 'stroke': '#65EA47', 'strokeWidth': 3, 'strokeDashArray': None, 'strokeLineCap': 'butt', 'strokeDashOffset': 0, 'strokeLineJoin': 'miter', 'strokeMiterLimit': 4, 'scaleX': 1, 'scaleY': 1, 'angle': 0, 'flipX': False, 'flipY': False, 'opacity': 1, 'shadow': None, 'visible': True, 'clipTo': None, 'backgroundColor': '', 'fillRule': 'nonzero', 'paintFirst': 'fill', 'globalCompositeOperation': 'source-over', 'transformMatrix': None, 'skewX': 0, 'skewY': 0, 'x1': -44.5, 'x2': 44.5, 'y1': -7.5, 'y2': 7.5}], 'background': '#eee'

[andfanilo]

Hey @Aya-S and welcome!

I've been digging the Fabric.js docs, and it seems that by definition:

• x1 = -width/2
• y1 = -height/2
• x2 = width/2
• y2 = height/2

This would be because the line center is considered the origin of the line so (x1;y1) is where you first created the line and (x2;y2) where you released it, and those coordinates are relative to the line center.

Using 2 * x2 and 2 * y2 values yourself give the correct gradients. Careful as JS Canvas consider x grows by going from left to write, and y grows by going from top to bottom.

Beware as if you transform your lines after drawing (like rescaling or rotating), the x2 and y2 won't change, you'd have to apply the transformations yourself by applying the scaleX, scaleY and angle properties.

Hope this helps, don't hesitate if you have more questions, otherwise feel free to close :) Fanilo