java - Canvas の上に gridPane によって配置された ColorPicker を配置する方法

Question

グリッド ペインを使用して配置された 3 つのカラー ピッカーを取得しました。キャンバスも使用しています。しかし問題は、キャンバスがグリッド ペインを画面の下部にプッシュすることです。したがって、使用している場合root.add(HeadColor, 0, 1);(列 0 と行 1 のグリッド ペインに最初のカラーピッカーを追加するため)、グリッド ペインはグリッド ペインの下から始まるため、カラーピッカーは画面の中央のどこかに配置されます。私の質問は、キャンバスの上にグリッド ペインを配置する方法、またはキャンバスの上にカラーピッカーを配置する方法です。

私が使用するコード：

package gui;

import display.Image;
import java.awt.Button;
import java.io.IOException;
import java.util.logging.*;
import javafx.application.Application;
import javafx.event.*;
import javafx.geometry.*;
import javafx.scene.Scene;
import javafx.scene.canvas.*;
import javafx.scene.control.ColorPicker;
import javafx.scene.layout.*;
import javafx.scene.layout.VBox;
import javafx.scene.paint.*;
import javafx.scene.text.Font;
import javafx.stage.Stage;

public class JavaFXColorPicker extends Application {
private Image head;
private Image heart;

ColorPicker HeadColor = new ColorPicker();
ColorPicker BodyColor = new ColorPicker();
ColorPicker LegColor = new ColorPicker();

@Override
public void start(Stage primaryStage) throws IOException {

    GridPane root = new GridPane();
    final Canvas canvas = new Canvas(200,300);

    Scene scene = new Scene(root, 500, 400, Color.BLACK);   
    GraphicsContext gc = canvas.getGraphicsContext2D();
    root.setHgap(10);
    root.setVgap(10);
    root.setPadding(new Insets(10, 30, 30, 30));

    HeadColor.setOnAction(new EventHandler(){ 
        @Override
        public void handle(Event event) {
            Color HeadPaint = HeadColor.getValue();
            Color[] HeadColorArray = new Color[]
                {
                    new Color(0 , 0, 0, 1),
                    HeadPaint,
                    HeadPaint,
                    HeadPaint,
                    HeadPaint,
                    new Color(1, 1, 1, 1) // de ogen
                 };

            try {
                head = new display.Image(display.Parts.playerHead);
            } catch (IOException ex) {
                Logger.getLogger(JavaFXColorPicker.class.getName())
                        .log(Level.SEVERE, null, ex);
            }

            head.recolour(HeadColorArray);
            Image i = head;
            gc.drawImage(i.show(), 200, 100);
        }
    });

    root.getChildren().add(canvas);
    root.add(HeadColor, 0, 1); 
    root.add(BodyColor, 0, 2); 
    root.add(LegColor,0,3);

    primaryStage.setTitle("Customize Character!");
    primaryStage.setScene(scene);
    primaryStage.show();
}

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