JavaFX Tip 1: Resizable Canvas

While working on FlexGanttFX I had to deal a lot with the JavaFX Canvas node. I am using it to render activities on a timeline. Each row in the Gantt chart is a Canvas node. The user has the option to resize each row individually. So I had to figure out the best way to resize a canvas, which out-of-the-box is not resizable. The listing below shows how this can be accomplished.

The main steps needed are:

• Create a subclass of Canvas.
• Override the isResizable() method and return true.
• Override the prefWidth() and prefHeight() methods. Return the values of Canvas.getWidth() and Canvas.getHeight().
• Add listeners to the width and height properties of Canvas in order to trigger a redraw when the size of the canvas changes.
• Bind the width and height properties of Canvas to the width and height properties of the parent pane.