title: How to embed JavaFX Canvas into BorderPane?
body: <p>I'm trying to make a application using JavaFX.</p>
  
  <p>What I want to make is the window with <code>MenuBar</code> on the top of it and <code>Canvas</code> in the center.
  I also want the window to be able to resize.
  Referring to the following link, which shows how to make <code>Canvas</code> resizable, I first made the following code:</p>
  
  <p><a href="http://dlsc.com/2014/04/10/javafx-tip-1-resizable-canvas/" rel="nofollow">JavaFX Tip 1: Resizable Canvas – DLSC</a></p>
  
  <pre><code>import javafx.application.Application;
  import javafx.scene.Scene;
  import javafx.scene.canvas.Canvas;
  import javafx.scene.canvas.GraphicsContext;
  import javafx.scene.control.Menu;
  import javafx.scene.control.MenuBar;
  import javafx.scene.layout.BorderPane;
  import javafx.scene.paint.Color;
  import javafx.stage.Stage;
  
  public class CanvasInBorderPane extends Application {
  
      public static void main(String[] args) {
          launch(args);
      }
  
      @Override
      public void start(Stage primaryStage) throws Exception {
          BorderPane borderPane = new BorderPane();
  
          // Put menu bar on the top of the window
          MenuBar menuBar = new MenuBar(new Menu("File"), new Menu("Edit"),
                  new Menu("Help"));
          borderPane.setTop(menuBar);
  
          // Put canvas in the center of the window (*)
          Canvas canvas = new Canvas();
          borderPane.setCenter(canvas);
          // Bind the width/height property so that the size of the Canvas will be
          // resized as the window is resized
          canvas.widthProperty().bind(borderPane.widthProperty());
          canvas.heightProperty().bind(borderPane.heightProperty());
          // redraw when resized
          canvas.widthProperty().addListener(event -&gt; draw(canvas));
          canvas.heightProperty().addListener(event -&gt; draw(canvas));
          draw(canvas);
  
          Scene scene = new Scene(borderPane);
          primaryStage.setScene(scene);
          primaryStage.show();
      }
  
      /**
       * Draw crossed red lines which each each end is at the corner of window,
       * and 4 blue circles whose each center is at the corner of the window,
       * so that make it possible to know where is the extent the Canvas draws
       */
      private void draw(Canvas canvas) {
          int width = (int) canvas.getWidth();
          int height = (int) canvas.getHeight();
          GraphicsContext gc = canvas.getGraphicsContext2D();
          gc.clearRect(0, 0, width, height);
          gc.setStroke(Color.RED);
          gc.strokeLine(0, 0, width, height);
          gc.strokeLine(0, height, width, 0);
          gc.setFill(Color.BLUE);
          gc.fillOval(-30, -30, 60, 60);
          gc.fillOval(-30 + width, -30, 60, 60);
          gc.fillOval(-30, -30 + height, 60, 60);
          gc.fillOval(-30 + width, -30 + height, 60, 60);
      }
  }
  </code></pre>
  
  <p>Then I got a window like (1) (See the picture below.)</p>
  
  <p>I know this is because the actual size the <code>Canvas</code> should be is smaller than the size of <code>borderPane</code>.  But I don't know how to get the CENTER region of the <code>BorderPane</code>.</p>
  
  <p>I then tried putting a wrapper <code>Pane</code> in the center of the <code>borderPane</code> and embed the <code>Canvas</code> into it, binding the width and height of the wrapper <code>Pane</code> to the <code>Canvas</code>.  I changed the 10+ lines of the code above which initializes the <code>Canvas</code> (which start from the comment-line with (*)) as follows:</p>
  
  <pre><code>        // Create a wrapper Pane first
          BorderPane wrapperPane = new BorderPane();
          borderPane.setCenter(wrapperPane);
          // Put canvas in the center of the window
          Canvas canvas = new Canvas();
          wrapperPane.setCenter(canvas);
          // Bind the width/height property to the wrapper Pane
          canvas.widthProperty().bind(wrapperPane.widthProperty());
          canvas.heightProperty().bind(wrapperPane.heightProperty());
          // redraw when resized
          canvas.widthProperty().addListener(event -&gt; draw(canvas));
          canvas.heightProperty().addListener(event -&gt; draw(canvas));
          draw(canvas);
  </code></pre>
  
  <p>Then something strange happened.  When I increased the width of the window, everything went good as I supposed. (Picture (2))</p>
  
  <p>However, though I decreased the width, the width of the Canvas wouldn't decrease, in other words, fit to the size of the window. (Picture (3))</p>
  
  <p>And so does the height.</p>
  
  <p>Does anybody have an idea to do away with this problem?
  My Java version is 1.8.0_71.</p>
  
  <p><a href="http://i.stack.imgur.com/J2uJO.png" rel="nofollow">The screenshots of the window</a></p>