In the set origin coordinates for react-konva stage, it gives a helpful example about how to use offsets to set a node's origin.
The example sets the offsets of the layer to (-200, -200) so the full axes and the circle show. But I am confused by the negative offsets. I thought they should be (200, 200). But unfortunately the positive offsets make the canvas look empty. Could anyone explain how the negative offsets work?
Coordinates start in the top-left corner of the canvas. So when you place something on your canvas, you move from top-left corner to the desired point. Simply put, the x-coordinate increases to the right and the y-coordinate increases when you go down. This system is called window coordinates.
Offset is a parameter that allows you to shift the starting point of the canvas. The direction of such movement is opposite to the direction of window coordinates, so notation layer.offsetX(100) means that you move starting point left by 100 pixels.
In the given example offsets are set to -200, so (0, 0) point (ex-start) is now on (200, 200).
Hope my explanations will help you to understand window coordinates.
