How can I "highlight" or put a border around a JavaFX 8 Canvas?

Question

I am attempting to put together a simple POC for an Image Viewer desktop product. My viewer needs to support annotations, so I have decided to attempt this with a main canvas for the image I am looking at, then using smaller canvas objects to place the annotations.

The annotations need to be abled to be dragged, deleted, reordered etc.

However, to show which canvas is selected, I need to highlight it, or put a shadow on it, or wrap a border around it.

I can't see a CSS style that I can apply there. I have wrapped it in an HBox to simulate the effect, but I was wondering if it's possible another way?

Thanks!

Answer 1

Canvas is a direct subclass of Node, so it only supports the CSS properties defined for Node. These do not include the standard ways to apply borders, such as -fx-background-color or -fx-border-color.

However, Node supports the -fx-effect property, so you could use that. Here is a "quick-and-dirty" example using inline styles (in a real app I would recommend using an external stylesheet; perhaps, depending on your requirements, subclassing Canvas to provide the "selection" behavior):

import javafx.application.Application;
import javafx.beans.property.ObjectProperty;
import javafx.beans.property.SimpleObjectProperty;
import javafx.scene.Scene;
import javafx.scene.canvas.Canvas;
import javafx.scene.canvas.GraphicsContext;
import javafx.scene.layout.HBox;
import javafx.scene.paint.Color;
import javafx.stage.Stage;

public class CanvasCSSEffect extends Application {

    @Override
    public void start(Stage primaryStage) {
        Canvas canvas1 = new Canvas(400, 400);
        Canvas canvas2 = new Canvas(400, 400);

        GraphicsContext gc1 = canvas1.getGraphicsContext2D();
        gc1.setFill(Color.CORNSILK);
        gc1.fillRect(0, 0, 400, 400);

        GraphicsContext gc2 = canvas2.getGraphicsContext2D();
        gc2.setFill(Color.ANTIQUEWHITE);
        gc2.fillRect(0, 0, 400, 400);

        ObjectProperty<Canvas> selectedCanvas = new SimpleObjectProperty<>();
        selectedCanvas.addListener((obs, oldCanvas, newCanvas) -> {
            if (oldCanvas != null) {
                oldCanvas.setStyle("");
            }
            if (newCanvas != null) {
                newCanvas.setStyle("-fx-effect: innershadow(gaussian, #039ed3, 10, 1.0, 0, 0);");
            }
        });

        canvas1.setOnMouseClicked(e -> selectedCanvas.set(canvas1));
        canvas2.setOnMouseClicked(e -> selectedCanvas.set(canvas2));

        HBox root = new HBox(10, canvas1, canvas2);
        primaryStage.setScene(new Scene(root));
        primaryStage.show();
    }

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