JavaFX "y" position on Canvas

Question

I created a program that randomly draws circles,squares,rectangles. My problem is I'm getting the click position with event.getX() and event.getY();

Here is the problem:

Green point is the where I click the Canvas.

↑→ axis must be like this. But in my program it stands like this ↓→

Here is the details:

Getting mouse position with (extending Canvas):

super.setOnMouseClicked(event -> selectFigureContaining(event.getX(),event.getY()));

Initializing part :

@Override
    public void start(Stage primaryStage) {
        this.color = Color.BLACK;
        toggleGroup = new ToggleGroup();
        hBox = new HBox();
        vBox = new VBox();
        label = new Label();

        vBox.setPadding(new Insets(5,15,0,15));
        vBox.setSpacing(10);
        hBox.setPadding(new Insets(5,0,0,0));




        //Radio Buttons
        red = new RadioButton("Red");
        red.setSelected(true);
        green = new RadioButton("Green");
        blue = new RadioButton("Blue");

        red.setToggleGroup(toggleGroup);
        green.setToggleGroup(toggleGroup);
        blue.setToggleGroup(toggleGroup);



        //Buttons
        buttonCircle = new Button("Circle");
        buttonCircle.setMinSize(70,20);
        buttonCircle.setOnMouseClicked(event -> circleButtonClicked());

        buttonSquare = new Button("Square");
        buttonSquare.setMinSize(70,20);
        buttonSquare.setOnMouseClicked(event -> squareButtonClicked());

        buttonRectangle = new Button("Rectangle");
        buttonRectangle.setMinSize(70,20);
        buttonRectangle.setOnMouseClicked(event -> rectangleButtonClicked());

        cleanAll = new Button("Clean All");
        cleanAll.setMinSize(70,20);
        cleanAll.setOnMouseClicked(event -> cleanAllEvent());


        figureCanvas = new FigureCanvas(10,400,500, this);
        vBox.getChildren().addAll(red,green,blue,buttonCircle,buttonSquare,buttonRectangle,cleanAll,label);
        hBox.getChildren().addAll(vBox,figureCanvas);


        Scene scene = new Scene(hBox,500,500);

        primaryStage.setScene(scene);
        primaryStage.setTitle("Draw Figure");
        primaryStage.show();

    }

I'm really new to JavaFX. I couldn't understand why y axis getting smaller on left upper side. Thanks.

Answer 1

Normally, the coordinate system's origin is at the top left of the screen and positive y is downwards:
. ---> +x
|
v +y
You can transform your y position like this to get expected movement (origin at the bottom left, +y goes up):

y = canvas.getHeight() - y;