# Resize Processing canvas in JavaFX window

**URL:** <https://discourse.processing.org/t/resize-processing-canvas-in-javafx-window/16353>\
**Category:** Coding Questions\
**Created:** [December 12, 2019, 7:58pm UTC](https://discourse.processing.org/t/resize-processing-canvas-in-javafx-window/16353 "2019-12-12T19:58:04Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Ackados](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/ackados/32/8282_2.png) [@Ackados](https://discourse.processing.org/u/Ackados)\
**Post date:** [December 12, 2019, 7:58pm UTC](https://discourse.processing.org/t/resize-processing-canvas-in-javafx-window/16353/1 "2019-12-12T19:58:04Z")

</div>

I am wondering how I can resize the processing canvas that’s contained in my JavaFX app.

Processing.java:

```auto
    @Override
    public void settings() {
        size(0,0,FX2D);
        fullScreen();
    }

    @Override
    public void setup() {
        surface.setResizable(true);
    }

```

(Not shown is the PSurface initSurface())

For my FXML, I am using a BorderPane and in the center, is a VBox.

```auto
BorderPane root = FXMLLoader.load(getClass().getResource("app.fxml"));

        VBox pane = (VBox) root.getCenter();

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

        // Adding the canvas to App
        root.getChildren().add(processingCanvas);

```

And what I get is this:

 ![Capture](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/4/48318eb6497a352a1066c824ea6980e3be1b80c3.png)

Is this possible to do in Processing and JavaFX? If not I may have to stick with JavaFX for my project…

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [December 15, 2019, 7:04am UTC](https://discourse.processing.org/t/resize-processing-canvas-in-javafx-window/16353/2 "2019-12-15T07:04:17Z")

</div>

From your screenshot – what is happening? Are you able to drag the window frame out it reveals the white area, but the gray Processing sketch area stays the same size?

---

<div class="post-metadata">

**Author:** ![Ackados](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/ackados/32/8282_2.png) [@Ackados](https://discourse.processing.org/u/Ackados)\
**Post date:** [December 15, 2019, 5:40pm UTC](https://discourse.processing.org/t/resize-processing-canvas-in-javafx-window/16353/3 "2019-12-15T17:40:11Z")

</div>

Yes, I dragged the window out and the rest is white, the javafx window. Sorry the screenshot is hard to tell. The processing window does stay the same.

---

<div class="post-metadata">

**Author:** ![Lexyth](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/lexyth/32/7403_2.png) [@Lexyth](https://discourse.processing.org/u/Lexyth)\
**Post date:** [December 15, 2019, 6:03pm UTC](https://discourse.processing.org/t/resize-processing-canvas-in-javafx-window/16353/4 "2019-12-15T18:03:23Z")

</div>

Try taking a look at this one :

> [@Resizable window with constrained proportions](https://discourse.processing.org/t/resizable-window-with-constrained-proportions/7536):
>
> When I need the canvas to be resizable I use surface.setResizable(true);. However, I need to keep the width and height equal and can’t seem to find a way to apply constraints to do so. I initially tried to manually set the size to keep the dimensions proportional, but that led to unpleasant flickering when I resized the window. Any ideas on the best way to implement this are welcome. Thanks!