javafx FXML Canvas vacío después de dibujar

Estoy usando Intellij IDEA para el desarrollo javafx FXML. Usé el siguiente código para simplemente dibujar un rectángulo. Sin embargo, nunca apareció.

Main.java

public class Main extends Application {

    @Override
    public void start(Stage primaryStage) throws Exception{
        Parent root = FXMLLoader.load(getClass().getResource("sample.fxml"));
        primaryStage.setTitle("Hello World");
        primaryStage.setScene(new Scene(root, 600, 400));
        primaryStage.show();
    }


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

Controller.java

public class Controller implements Initializable {
public Mat image;
@FXML public Canvas img = new Canvas(300,300);
public GraphicsContext gc = img.getGraphicsContext2D();
@FXML private void drawCanvas(ActionEvent event) {
    gc.setFill(Color.AQUA);
    gc.fillRect(10,10,100,100);
}
@Override
public void initialize(URL location, ResourceBundle resources) {
        gc.setFill(Color.BLACK);
        System.out.println("color set to black");
        gc.fillRect(50, 50, 100, 100);
        System.out.println("draw rectangle");
    }
}

Usé setFill () y fillRect () tanto en Button OnAction como en los métodos de inicialización. Pero todavía no dibuja los rectángulos.

sample.fxml

<BorderPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="600.0" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1" fx:controller="sample.Controller">
   <top>
      <ToolBar prefHeight="40.0" prefWidth="200.0" BorderPane.alignment="CENTER">
        <items>
          <Button mnemonicParsing="false" onAction="#drawCanvas" text="draw" />
        </items>
      </ToolBar>
   </top>
   <bottom>
      <AnchorPane prefHeight="41.0" prefWidth="600.0" BorderPane.alignment="CENTER">
         <children>
            <Label fx:id="co" layoutX="14.0" layoutY="9.0" text="co" />
            <Label fx:id="rgb" layoutX="144.0" layoutY="13.0" text="RGB" />
            <Label fx:id="zoom" layoutX="245.0" layoutY="9.0" text="zoom" />
         </children>
      </AnchorPane>
   </bottom>
   <center>
      <ScrollPane fx:id="img_pane" prefHeight="200.0" prefWidth="200.0" BorderPane.alignment="CENTER">
         <content>
            <Canvas fx:id="img" height="286.0" width="355.0" />
         </content>
      </ScrollPane>
   </center>
</BorderPane>