path-planning | 基于百度地图2.0 、 react 、antd-mobile 的移动端路线规划组件 | Router library

My program is one where you can place points of a field drawing from an FRC competition and then you can see the path that you have defined using those points.

The first step of the program is calibrating (finding the pixel to real distance scale) and I am currently adding the functionality of defining the field (the field walls, obstacles, etc...). I am first trying to define the field borders. To do this I was thinking about selecting points on the drawing and then add them to a polygon, then subtracting the polygon from a rectangle the same size as the field image.

The problem is that when testing this it shows my subtracted shape offset for some reason. I have looked at the StackOverflow question about Shape.intersect, however, it does not help. I have checked all the layout positions, scales, etc. of the AnchorPane and its children I place inside of it, but it all returns either 0 or 1s.

Here is a drawing of what it returns: The red rectangle is the rectangle that is the size of the image.
The purple is the overlap between the rectangle and the polygon selected.
The grey is the Shape.subtract() resultant.

What I want is that the Shape.substract (the grey) has its empty spot on top of the purple and fit perfectly. But as you can see in this image the purple overlaps with the grey.

This is how I want it to look like:

Here is a testing environment I have created to reproduce the phenomenon:

Main.java