title: Unable to get graphics context from fxml canvas
body: <p>I've created a basic FXML layout with a grid and canvas side by side. I have access to the canvas object (drawArea) but after having called getGraphicsContext my gt variable is always null.</p>
  
  <p><strong>Controller Class</strong></p>
  
  <pre><code>public class controls {
      private GraphicsContext gc;
      @FXML private Canvas drawArea;
  
  public void start() {
      gc = drawArea.getGraphicsContext2D();
  }
  
  
  @FXML protected void Step(ActionEvent event) {
      //TODO code to update positions of boids.
      System.out.print("Step triggered ");
  
  
      gc.fillOval(100, 100, 10, 10);
  }
  </code></pre>
  
  <p>}</p>
  
  <p><strong>FXML display</strong></p>
  
  <pre><code>&lt;SplitPane dividerPositions="0.29797979797979796" 
  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="controller.controls" &gt;
    &lt;items&gt;
  
      &lt;AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="160.0" prefWidth="100.0"&gt;
           &lt;children&gt;
              &lt;GridPane hgap="15.0" prefHeight="90.0" prefWidth="175.0"&gt;
                &lt;columnConstraints&gt;
                  &lt;ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" /&gt;
                  &lt;ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" /&gt;
                &lt;/columnConstraints&gt;
  
  
  &lt;rowConstraints&gt;
              &lt;RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" /&gt;
              &lt;RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" /&gt;
              &lt;RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" /&gt;
            &lt;/rowConstraints&gt;
             &lt;children&gt;
                &lt;Label text="Flock Size:" /&gt;
                &lt;Button id="buttonStart" mnemonicParsing="false" text="Start" GridPane.columnIndex="1" GridPane.halignment="CENTER" GridPane.rowIndex="2" /&gt;
                &lt;Button id="buttonStep" mnemonicParsing="false" onAction="#flockStep" text="Step" GridPane.halignment="CENTER" GridPane.rowIndex="1" /&gt;
                &lt;Button mnemonicParsing="false" text="-" GridPane.columnIndex="1" GridPane.halignment="LEFT" /&gt;
                &lt;Button mnemonicParsing="false" text="+" GridPane.columnIndex="1" GridPane.halignment="RIGHT" /&gt;
                &lt;Button id="buttonStop" mnemonicParsing="false" text="Stop" GridPane.halignment="CENTER" GridPane.rowIndex="2" /&gt;
             &lt;/children&gt;
          &lt;/GridPane&gt;
       &lt;/children&gt;&lt;/AnchorPane&gt;
  &lt;AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="160.0" prefWidth="100.0"&gt;
       &lt;children&gt;
          &lt;Canvas fx:id="drawArea" height="200.0" width="200.0" /&gt;
       &lt;/children&gt;&lt;/AnchorPane&gt;
  </code></pre>
  
  <p>
  </p>