Please edit this code to add three buttons, a clear button, pencil up button, and pencil down button while allowing the user to see where the pencil currently is on the screen. Please do so without changing the keycode up down left right part. Will thumbs up if it works.

import javafx.scene.Scene;

import javafx.scene.canvas.Canvas;

import javafx.scene.canvas.GraphicsContext;

import javafx.scene.input.KeyCode;

import javafx.scene.layout.Pane;

import javafx.stage.Stage;

import javafx.application.Application;

public class arrowdrawing extends Application $\{$

double x$,$ y;

final double SPEED$=10$;

@Override

public void start$($Stage primaryStage$)\{$

Pane pane $=$ new Pane$()$;

Canvas canvas $=$ new Canvas$(300,300)$;

GraphicsContext gc $=$ canvas.getGraphicsContext$2$D$()$;

pane.getChildren$().$add$($canvas$)$;

x $=$ canvas.getWidth$()/2$;

y $=$ canvas.getHeight$()/2$;

gc$.$moveTo$($x$,$ y$)$;

Scene scene $=$ new Scene$($pane$,300,300)$;

scene.setOnKeyPressed$($e $->\{$

if $($e$.$getCode$()==$ KeyCode.UP$)\{$

y $-=$ SPEED;

$\}$ else if $($e$.$getCode$()==$ KeyCode.DOWN$)\{$

y $+=$ SPEED;

$\}$ else if $($e$.$getCode$()==$ KeyCode.LEFT$)\{$

x $-=$ SPEED;

$\}$ else if $($e$.$getCode$()==$ KeyCode.RIGHT$)\{$

x $+=$ SPEED;

$\}$

gc$.$lineTo$($x$,$ y$)$;

gc$.$stroke$()$;

$\})$;

primaryStage.setScene$($scene$)$;

primaryStage.show$()$;

$\}$

public static void main$($String$[]$ args$)\{$

launch$($args$)$;

$\}$

$\}$