CanvasPane

CanvasPane is a Pane with a single Canvas node to make the canvas resizable. A DrawHandler can be set for custom content drawing. By default, before the drawHandler is called, the canvas will be cleared. You can change the behavior by disabling the autoClear feature. This is helpful when performance has to be optimized in a scenario where the content has to be repainted very often and can be achieved by calling #setAutoClear(false). The demo application paints a red cross on a translucent rectangle and can be downloaded from the link below.

CanvasPane cp = new CanvasPane();
cp.setStyle("-fx-background-color:#FF7; -fx-padding:10 20 30 40");
cp.setDrawHandler((p, g, x, y, w, h) -> {    
  g.setFill(Color.gray(0.5, 0.5));
  g.fillRect(x, y, w, h);
  g.setStroke(Color.RED);
  g.strokeLine(x, y, x+w, y+h);
  g.strokeLine(x, y+h, x+w, y);
});

See also

Download Canvas Pane Demo
CSS Reference - CanvasPane