title: JavaFX: Canvas resizing not working properly
body: <p>I have a JavaFX application where there is a canvas with purple background and 2 diagonal lines. I bound the canvas dimensions with its respective pane container. Each time when this canvas is redimensioned, I redraw it.</p>
  
  <p>Follow the code:</p>
  
  <pre><code>import javafx.application.Application;
  import javafx.beans.binding.Bindings;
  import javafx.beans.property.ReadOnlyDoubleProperty;
  import javafx.beans.property.ReadOnlyProperty;
  import javafx.beans.value.ObservableValue;
  import javafx.geometry.Insets;
  import javafx.scene.Scene;
  import javafx.scene.canvas.Canvas;
  import javafx.scene.canvas.GraphicsContext;
  import javafx.scene.layout.FlowPane;
  import javafx.scene.paint.Color;
  import javafx.stage.Stage;
  
  import java.time.LocalTime;
  
  public class TestPaintColor0 extends Application {
  
      private void printChange(ReadOnlyProperty&lt;Number&gt; observable, Number oldValue, Number newValue, Canvas canvas) {
          System.out.printf("[%s] %10s.%-10s: %4.0f -&gt; %4.0f. Canvas: %4.0f x %4.0f.\n",
                  LocalTime.now(), observable.getBean().getClass().getSimpleName(), observable.getName(), oldValue, newValue,
                  canvas.getWidth(), canvas.getHeight());
      }
  
      private void repaint(ObservableValue&lt;? extends Number&gt; observable, Number oldValue, Number newValue, Canvas canvas) {
          GraphicsContext gc = canvas.getGraphicsContext2D();
  
          // Should clear canvas.
          gc.clearRect(0, 0, canvas.getWidth(), canvas.getHeight());
  
          // Paint background
          gc.setFill(Color.PURPLE);
          gc.fillRect(0, 0, canvas.getWidth(), canvas.getHeight());
  
          // draw diagonals
          gc.setStroke(Color.BLACK);
          gc.moveTo(0, 0);
          gc.lineTo(canvas.getWidth(), canvas.getHeight());
          gc.moveTo(0, canvas.getHeight());
          gc.lineTo(canvas.getWidth(), 0);
          gc.stroke();
  
          printChange((ReadOnlyProperty&lt;Number&gt;) observable, oldValue, newValue, canvas);
      }
  
      @Override
      public void start(Stage primaryStage) {
          final Canvas canvas = new Canvas();
  //        final Canvas canvas = new Canvas() {
  //            @Override
  //            public boolean isResizable() {
  //                return true;
  //            }
  //        };
          canvas.heightProperty().addListener((observable, oldValue, newValue) -&gt; repaint(observable, oldValue, newValue, canvas));
          canvas.widthProperty().addListener((observable, oldValue, newValue) -&gt; repaint(observable, oldValue, newValue, canvas));
  
          FlowPane pane = new FlowPane(canvas);
          pane.setPadding(new Insets(5));
          canvas.widthProperty().bind(pane.widthProperty());
          canvas.heightProperty().bind(pane.heightProperty());
          pane.heightProperty().addListener((observable, oldValue, newValue) -&gt;
                  printChange((ReadOnlyDoubleProperty) observable, oldValue, newValue, canvas));
          pane.widthProperty().addListener((observable, oldValue, newValue) -&gt;
                  printChange((ReadOnlyDoubleProperty) observable, oldValue, newValue, canvas));
  
          primaryStage.setScene(new Scene(pane, 600, 400));
          primaryStage.titleProperty().bind(
                  Bindings.concat(
                          "Test paint Pixel. Canvas: ", pane.widthProperty().asString(), " x ", pane.heightProperty().asString()
                  )
          );
          primaryStage.show();
      }
  
      public static void main(String[] args) {
          launch(args);
      }
  
  }
  </code></pre>
  
  <p>Below the application when it is launched.</p>
  
  <p><a href="https://i.stack.imgur.com/lzXjc.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/lzXjc.png" alt="Application when launched"></a></p>
  
  <p>This is what happens when I resize the application:</p>
  
  <p><a href="https://i.stack.imgur.com/p1LOk.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/p1LOk.png" alt="Application after resized"></a></p>
  
  <p>As you can see, the canvas is not redrawn. Instead, the lines are superimposed. Even after calling <code>GraphicsContext.clearRect()</code> as suggested in many posts here in StackOverflow.
  Besides, if you see the fist image, the pane padding is not working. Actually apparently just the top and left padding are working but not the bottom and right ones. There is not space between canvas' bottom and right and the application windows.</p>
  
  <p>So does Someone have any idea about what is wrong here?</p>
  
  <p>Thanks,</p>