How to make canvas Resizable in javaFX?

Question

In javaFX to resize a canvas there is no such method to do that, the only solution is to extends from Canvas.

class ResizableCanvas extends Canvas {

    public ResizableCanvas() {
        // Redraw canvas when size changes.
        widthProperty().addListener(evt -> draw());
        heightProperty().addListener(evt -> draw());
    }

    private void draw() {
        double width = getWidth();
        double height = getHeight();

        GraphicsContext gc = getGraphicsContext2D();
        gc.clearRect(0, 0, width, height);

    }

    @Override
    public boolean isResizable() {
        return true;
    }
}

is extends from Canvas is the only solution to make canvas Resizable ? because this solution work only if we don't want to use FXML, if we declare in fxml a canvas how can we make it resizable?

this is my code :

package sample;

import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Scene;
import javafx.scene.canvas.GraphicsContext;
import javafx.scene.layout.AnchorPane;
import javafx.scene.paint.Color;
import javafx.stage.Stage;

public class Main extends Application {

    Controller controller;

    @Override
    public void start(Stage primaryStage) throws Exception{
        FXMLLoader loader = new FXMLLoader(getClass().getResource("sample.fxml"));
        AnchorPane root = loader.load(); // controller initialized
        controller = loader.getController();
        GraphicsContext gc = controller.canvas.getGraphicsContext2D();
        gc.setFill(Color.AQUA);
        gc.fillRect(0, 0, root.getPrefWidth(), root.getPrefHeight());
        primaryStage.setTitle("Hello World");
        primaryStage.setScene(new Scene(controller.Pane, controller.Pane.getPrefWidth(), controller.Pane.getPrefHeight()));
        primaryStage.show();
    }

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

Puiia

Why does this solution not work if you use FXML? – Cherlycherlyn

if I use the solution , I will affect object of the class to canvas of FXML , the canvas will be resizable but when I compile the code the canvas isn't visible I don't know why. – Puiia

Looking at your code... I think probably root.getPrefWidth() and root.getPrefHeight() are not giving what you expect. To test, just try hard-coding something and see if it works. Also, are you setting the width and height of the canvas in FMXL? – Cherlycherlyn

I changed root.getPrefWidth() to controller.Pane.getPrefWidth(); it works. the only problem is the canvas isn't resizable. this is canvas in FXML: <Canvas fx:id="canvas" height="267.0" layoutX="13.0" layoutY="9.0" width="450.0" AnchorPane.bottomAnchor="8.0" AnchorPane.leftAnchor="13.0" AnchorPane.rightAnchor="12.0" AnchorPane.topAnchor="9.0" /> – Puiia

Why not just use your Canvas subclass in the FXML? <ResizableCanvas fx:id="canvas" ... /> Just make sure you have the correct import for it. – Cherlycherlyn

I didn't know we can do that lol thanks ! x) – Puiia

Answer 1

There's a guide that I think that you may find useful for setting up a resizable canvas:

JavaFx tip - resizable canvas

Piece of code from the guide:

/**
 * Tip 1: A canvas resizing itself to the size of
 *        the parent pane.
 */
public class Tip1ResizableCanvas extends Application {

    class ResizableCanvas extends Canvas {

        public ResizableCanvas() {
            // Redraw canvas when size changes.
            widthProperty().addListener(evt -> draw());
            heightProperty().addListener(evt -> draw());
        }

        private void draw() {
            double width = getWidth();
            double height = getHeight();

            GraphicsContext gc = getGraphicsContext2D();
            gc.clearRect(0, 0, width, height);

            gc.setStroke(Color.RED);
            gc.strokeLine(0, 0, width, height);
            gc.strokeLine(0, height, width, 0);
        }

        @Override
        public boolean isResizable() {
            return true;
        }

        @Override
        public double prefWidth(double height) {
            return getWidth();
        }

        @Override
        public double prefHeight(double width) {
            return getHeight();
        }
    }

Recur

This solution is missing an important point of the linked tip: "Bind the width and height properties of Canvas to the width and height properties of the parent pane" e.g. if the canvas is added to a StackPane: canvas.widthProperty().bind(stackPane.widthProperty()); canvas.heightProperty().bind(stackPane.heightProperty()); – Courbet

This related answer illustrates the approach in context. – Coinsure

If the point is that the canvas should expand as much as possible, then prefWidth() and prefHeight() should return Double.MAX_VALUE. This matter for example if you add the ResizableCanvas to a VBox – Trismus

Answer 2

Of all the answers given, none of them actually worked for me in terms of making the canvas automatically resize with its parent. I decided to take a crack at this and this is what I came up with:

import javafx.scene.canvas.Canvas;

public class ResizableCanvas extends Canvas {

    @Override
    public boolean isResizable() {
        return true;
    }

    @Override
    public double maxHeight(double width) {
        return Double.POSITIVE_INFINITY;
    }

    @Override
    public double maxWidth(double height) {
        return Double.POSITIVE_INFINITY;
    }

    @Override
    public double minWidth(double height) {
        return 1D;
    }

    @Override
    public double minHeight(double width) {
        return 1D;
    }

    @Override
    public void resize(double width, double height) {
        this.setWidth(width);
        this.setHeight(height);
    }
}

This was the only one that actually made the canvas truly resizable.

---

My reasons for going with this approach is as follows:

• I didn't want to break encapsulation by forcing the parent component to send us a width and height in the constructor which would also mean that the canvas cannot be used in FXML.
• I also did not want to depend on the parent's width and height properties thus making the canvas the only child in it's parent, by taking up all the space.
• Finally, the canvas needed to have it's drawing done in another class, which meant I could not use the current accepted answer which also included drawing to canvas via a draw method.

With this canvas, I do not need to bind to its parent width/height properties to make the canvas resize. It just resizes with whatever size the parent chooses. In addition, anyone using the canvas can just bind to its width/height properties and manage their own drawing when these properties change.

Puck

Answer 3

Taken from http://werner.yellowcouch.org/log/resizable-javafx-canvas/: To make a JavaFx canvas resizable all that needs to be done is override the min/pref/max methods. Make it resizable and implement the resize method.

With this method no width/height listeners are necessary to trigger a redraw. It is also no longer necessary to bind the size of the width and height to the container.

public class ResizableCanvas extends Canvas {

@Override
public double minHeight(double width)
{
    return 64;
}

@Override
public double maxHeight(double width)
{
    return 1000;
}

@Override
public double prefHeight(double width)
{
    return minHeight(width);
}

@Override
public double minWidth(double height)
{
    return 0;
}

@Override
public double maxWidth(double height)
{
    return 10000;
}

@Override
public boolean isResizable()
{
    return true;
}

@Override
public void resize(double width, double height)
{
    super.setWidth(width);
    super.setHeight(height);
    <paint>
}

Gant

I don't know about this one; seems like the API changed maybe (e.g. what is pain()?) – Americium

Answer 4

The canvas class just needs to override isResizable() (everything else, which is suggested in other examples, is actually not necessary) :

public class ResizableCanvas extends Canvas
{
  public boolean isResizable()
  {
      return true;
  }
}

And in the Application the width and height properties of the canvas have to be bound to the canvas' parent:

@Override
public void start(Stage primaryStage) throws Exception
{
    ...
    StackPane pane = new StackPane();
    ResizableCanvas canvas = new ResizableCanvas(width, height);

    canvas.widthProperty().bind(pane.widthProperty());
    canvas.heightProperty().bind(pane.heightProperty());

    pane.getChildren().add(_canvas);
    ...
}

Listeners can be added to the width in height properties, in order to redraw the canvas, when it is resized (but if you need that and where to place it, depends on your application):

widthProperty().addListener(this::paint);
heightProperty().addListener(this::paint);

Courbet

This approach worked for me with no problem. Thanks! – Stentorian

Answer 5

I found that the above solutions did not work when the canvas is contained in a HBox, as the HBox would not shrink when window is resized because it would clip the canvas. Thus the HBox would expand, but never grow any smaller. I used the following code to make the canvas fit the container:

public class ResizableCanvas extends Canvas {
    @Override
    public double prefWidth(double height) {
        return 0;
    }

    @Override
    public double prefHeight(double width) {
    return 0;
    }
}

And in my controller class:

@FXML
private HBox canvasContainer;
private Canvas canvas = new ResizableCanvas();
...
@Override
public void start(Stage primaryStage) throws Exception {
    ...
    canvas.widthProperty().bind(canvasContainer.widthProperty());
    canvas.heightProperty().bind(canvasContainer.
    pane.getChildren().add(canvas);
    ...
}

Dartmoor

Answer 6

this solution work only if we don't want to use FXML

I am not sure about the merits of a resizable canvas itself, neither with/without FXML. Generally you want to redraw something on it, and then you do not have a canvas (which has no content on its own), but you are back to application-specific code, just as like the question iself and most answers around do contain some re/draw() method.
Then you could throw away the separate class, do four bindings in FXML:

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.canvas.Canvas?>
<?import javafx.scene.layout.Pane?>
<?import javafx.scene.layout.VBox?>

<VBox xmlns="http://javafx.com/javafx/11.0.1" xmlns:fx="http://javafx.com/fxml/1"
      fx:controller="test.TestController">
  <children>
    <Pane fx:id="pane" VBox.vgrow="ALWAYS">
      <children>
        <Canvas fx:id="canvas" height="${pane.height}" width="${pane.width}"
                onWidthChange="#redraw" onHeightChange="#redraw" />
      </children>
    </Pane>
  </children>
</VBox>

and implement only redraw() in Java:

package test;

import javafx.fxml.FXML;
import javafx.scene.canvas.Canvas;
import javafx.scene.canvas.GraphicsContext;

public class TestController {
  @FXML
  private Canvas canvas;

  @FXML
  private void redraw() {
    double w=canvas.getWidth();
    double h=canvas.getHeight();
    GraphicsContext gc=canvas.getGraphicsContext2D();
    gc.clearRect(0, 0, w, h);
    gc.beginPath();
    gc.rect(10, 10, w-20, h-20);
    gc.stroke();
  }
}

(If needed, find a suitable main class and module-info in https://mcmap.net/q/748749/-javafx-resize-canvas-in-fxml)

Whimsey

Answer 7

In order to achieve a resizable Canvas, I have placed my Canvas inside a Pane:

<Pane fx:id="canvasPane" >
    <Canvas fx:id="canvas" />
</Pane>

I then bound the Canvas height and width properties to those of the Pane inside the initialize method of my controller:

canvas.heightProperty().bind(canvasPane.heightProperty());
canvas.widthProperty().bind(canvasPane.widthProperty());

This allows the Pane to interact with the LayoutManager while causing the Canvas to fill the Pane.

Bruch