Implementing the zoom in and zoom out in a Plotting Calculator

Question

I'm working on a Plotting Calculator that traces Graphes of some functions but i'm struggling

with implementation of the zoom options.

What i want is to achieve the same result as in this link Plotting Calculator

I work with Javafx and the Canvas to draw the graph.

Actually, i have no idea how to proceed, but if you want i can post my code here !

Thanks in advance for all !

EDIT : Here is my code for plotting the X² function !

    package application;

import javafx.application.Application;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.scene.Scene;
import javafx.scene.canvas.Canvas;
import javafx.scene.canvas.GraphicsContext;
import javafx.scene.control.Button;
import javafx.scene.layout.BorderPane;
import javafx.scene.paint.Color;
import javafx.stage.Stage;

public class Square extends Application {

    double pixels=800;
    double xc;
    double yc;
    int i=0;



     Canvas can = new Canvas(800, 800);
     GraphicsContext gc = can.getGraphicsContext2D();


    @Override
    public void start(Stage primaryStage) {
        try {
            BorderPane root = new BorderPane();
            root.setCenter(can);
            Button btn = new Button("Draw image");
            Button btn2 = new Button("Zoom image");
            Button btn3 = new Button("Zoom out image");

            root.setTop(btn);
            root.setBottom(btn2);
            root.setLeft(btn3);

            btn3.setOnAction(new EventHandler<ActionEvent>() {
                @Override
                public void handle(ActionEvent arg0) {
                    i--;
                    if(i<=0)
                        i=1;
                    can.setScaleX(i);
                    can.setScaleY(i);
                }
            });
            btn2.setOnAction(new EventHandler<ActionEvent>() {
                @Override
                public void handle(ActionEvent arg0) {
                    i++;
                    can.setScaleX(i);
                    can.setScaleY(i);
                }
            });

            btn.setOnAction(new EventHandler<ActionEvent>() {

                @Override
                public void handle(ActionEvent arg0) {
                                   //Use this commands to trace the x axis and y axis and launching the plotting method
                    gc.setStroke(Color.RED);
                    gc.strokeLine(0, 400, 800, 400);
                    gc.strokeLine(400, 0, 400, 800);
                    traceImage();
                }
            });


            Scene scene = new Scene(root,800,800);
            scene.getStylesheets().add(getClass().getResource("application.css").toExternalForm());
            primaryStage.setScene(scene);
            primaryStage.show();
        } catch(Exception e) {
            e.printStackTrace();
        }
    }

    public static void main(String[] args) {
        launch(args);
    }

    //This the for loop for tracing the graph, i use r and yc to define the first points coordinates and xc and r+1 to define the second point coordinates, these for the line to be traced
    public void traceImage(){

        xc = 0;
        gc.setStroke(Color.GREEN);
        for (double r =-50; r < 50; r++) {
            yc = -Math.pow(r, 2);
            xc = -Math.pow((r+1),2);

            gc.strokeLine((r+400), (yc+400), ((r+1)+400), (xc+400));

        }
    }

}