[FIXED] Erasing Antialiased Shapes from a JavaFX Canvas

Issue

I have inherited a simulation program to extend with new features. The original was written as an Applet using the AWT library for graphics. Before adding the new features I want to adapt the program to the desktop and use JavaFX instead of AWT.

The simulation paints hundreds or thousands of objects dozens of times per second, then erases them and repaints them at new locations, effectively animating them. I am using a Canvas object for that part of the UI. Erasing is done by repainting the object with the background color. What I am seeing though is that erasing objects is incomplete. A kind of "halo" gets left behind though.

The following program illustrates the problem. Clicking the "Draw" button causes it to draw a few hundred circles on the Canvas using the foreground color. After drawing, clicking the button again will erase the circles by re-drawing them in the background color. Multiple cycles of draw/erase will build up a visible background of "ghost" images.

package com.clartaq.antialiasingghosts;

import javafx.application.Application;
import javafx.application.Platform;
import javafx.geometry.Insets;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.canvas.Canvas;
import javafx.scene.canvas.GraphicsContext;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.layout.*;
import javafx.scene.paint.Color;
import javafx.stage.Stage;

import java.util.Random;

public class Main extends Application {

    static final int NUM_CIRCLES = 500;
    static final int CIRCLE_DIAMETER = 10;
    static final double PANEL_WIDTH = 75.0;
    static final double PANEL_HEIGHT = 40.0;
    static final Color FG_COLOR = Color.rgb(10, 0, 200);
    static final Color BG_COLOR = Color.rgb(255, 255, 255);
    static final double BUTTON_WIDTH = 50.0;

    GraphicsContext gc;

    Random rand = new Random();

    double[] px = new double[NUM_CIRCLES];
    double[] py = new double[NUM_CIRCLES];

    void randomizeParticlePositions() {
        for (int i = 0; i < NUM_CIRCLES; i++) {
            px[i] = rand.nextDouble() * PANEL_WIDTH;
            py[i] = rand.nextDouble() * PANEL_HEIGHT;
        }
    }

    void drawCircles(Color color) {
        gc.setFill(color);
        for (int i = 0; i < NUM_CIRCLES; i++) {
            var screenX = px[i] * CIRCLE_DIAMETER;
            var screenY = py[i] * CIRCLE_DIAMETER;
            gc.fillOval(screenX, screenY, CIRCLE_DIAMETER, CIRCLE_DIAMETER);
        }
    }

    @Override
    public void start(Stage stage) {
        String javaVersion   = System.getProperty("java.version");
        String javafxVersion = System.getProperty("javafx.version");

        stage.setTitle("AntiAliasingGhosts -- erasing objects leaves ghosts in JavaFX");

        Label versionLabel = new Label("JavaFX " + javafxVersion
                + ", running on Java " + javaVersion + ".");

        double canvasWidth  = (PANEL_WIDTH * CIRCLE_DIAMETER);
        double canvasHeight = (PANEL_HEIGHT * CIRCLE_DIAMETER);
        Canvas canvasRef    = new Canvas(canvasWidth, canvasHeight);
        gc = canvasRef.getGraphicsContext2D();

        Button deBtn = new Button("Draw");
        deBtn.setPrefWidth(BUTTON_WIDTH);
        deBtn.setOnAction(e -> {
            String txt = deBtn.getText();
            switch (txt) {
                case "Draw" -> {
                    randomizeParticlePositions();
                    drawCircles(FG_COLOR);
                    deBtn.setText("Erase");
                }
                case "Erase" -> {
                    drawCircles(BG_COLOR);
                    deBtn.setText("Draw");
                }
                default -> Platform.exit();
            }
        });

        Button exBtn = new Button("Exit");
        exBtn.setPrefWidth(BUTTON_WIDTH);
        exBtn.setOnAction(e -> Platform.exit());

        TilePane tp = new TilePane();
        tp.setAlignment(Pos.CENTER);
        tp.setHgap(10);
        tp.getChildren().addAll(deBtn, exBtn);

        VBox root = new VBox();
        root.setPadding(new Insets(7));
        root.setSpacing(10);
        root.setAlignment(Pos.CENTER);
        root.getChildren().addAll(versionLabel, canvasRef, tp);

        StackPane      sp = new StackPane(root);
        BackgroundFill bf = new BackgroundFill(BG_COLOR, CornerRadii.EMPTY, Insets.EMPTY);
        Background     bg = new Background(bf);
        sp.setBackground(bg);

        Scene scene = new Scene(sp, 640.0, 480.0);

        stage.setScene(scene);
        stage.show();
    }

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

}

I can get good erasure by expanding the diameter of the circles by 2 pixels when erasing. Of course, that can affect nearby shapes too.

Also, using the fillRect method to erase the entire Canvas seems reasonable, but that means everything has to be re-drawn if anything has to be re-drawn. I suppose it is possible to optimize the re-draw by erasing and re-drawing a smaller section of the Canvas but I don't want to do that if it isn't necessary.

Magnifying sections of the program display shows that it is really an antialiasing effect. Constructing the Scene with the SceneAntialiasing.DISABLED parameter does not seem to have any effect.

Attempting to turn off image smoothing as suggested in this question does not help.

Is possible to erase a single shape drawn on a Canvas by re-drawing it in the background color?

I am using Java 17.0.1, JavaFX 17.0.1, and a 5K Mac display if that is relevant.

Solution

For expedience, note the difference between fillOval and strokeOval() in the GraphicsContext. You can conditionally erase the outline in drawCircles() as a function of a suitable boolean value:

if (stroke) {
    gc.setStroke(BG_COLOR);
    gc.strokeOval(screenX, screenY, CIRCLE_DIAMETER, CIRCLE_DIAMETER);
}

Try a few representative shapes, e.g. fillRect, to verify the desired result.

A better alternative, IMO, is to pursue the erase -> render strategy. Complete examples seen here and here may help you establish whether the approach is scalable to your use-case. See also this related examination of resampling artifact.

Expedient approach, as tested:

import javafx.application.Application;
import javafx.application.Platform;
import javafx.geometry.Insets;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.canvas.Canvas;
import javafx.scene.canvas.GraphicsContext;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.layout.*;
import javafx.scene.paint.Color;
import javafx.stage.Stage;

import java.util.Random;

public class Main extends Application {

    static final int NUM_CIRCLES = 500;
    static final int CIRCLE_DIAMETER = 10;
    static final double PANEL_WIDTH = 75.0;
    static final double PANEL_HEIGHT = 40.0;
    static final Color FG_COLOR = Color.rgb(10, 0, 200);
    static final Color BG_COLOR = Color.rgb(255, 255, 255);
    static final double BUTTON_WIDTH = 50.0;

    GraphicsContext gc;

    Random rand = new Random();
    private boolean stroke;

    double[] px = new double[NUM_CIRCLES];
    double[] py = new double[NUM_CIRCLES];

    void randomizeParticlePositions() {
        for (int i = 0; i < NUM_CIRCLES; i++) {
            px[i] = rand.nextDouble() * PANEL_WIDTH;
            py[i] = rand.nextDouble() * PANEL_HEIGHT;
        }
    }

    void drawCircles(Color color) {
        gc.setFill(color);
        for (int i = 0; i < NUM_CIRCLES; i++) {
            var screenX = px[i] * CIRCLE_DIAMETER;
            var screenY = py[i] * CIRCLE_DIAMETER;
            gc.fillOval(screenX, screenY, CIRCLE_DIAMETER, CIRCLE_DIAMETER);
            if (stroke) {
                gc.setStroke(BG_COLOR);
                gc.strokeOval(screenX, screenY, CIRCLE_DIAMETER, CIRCLE_DIAMETER);
            }
        }
    }

    @Override
    public void start(Stage stage) {
        String javaVersion = System.getProperty("java.version");
        String javafxVersion = System.getProperty("javafx.version");

        stage.setTitle("AntiAliasingGhosts -- erasing objects leaves ghosts in JavaFX");

        Label versionLabel = new Label("JavaFX " + javafxVersion
            + ", running on Java " + javaVersion + ".");

        double canvasWidth = (PANEL_WIDTH * CIRCLE_DIAMETER);
        double canvasHeight = (PANEL_HEIGHT * CIRCLE_DIAMETER);
        Canvas canvasRef = new Canvas(canvasWidth, canvasHeight);
        gc = canvasRef.getGraphicsContext2D();

        Button deBtn = new Button("Draw");
        deBtn.setPrefWidth(BUTTON_WIDTH);
        deBtn.setOnAction(e -> {
            String txt = deBtn.getText();
            switch (txt) {
                case "Draw" -> {
                    randomizeParticlePositions();
                    drawCircles(FG_COLOR);
                    deBtn.setText("Erase");
                    stroke = true;
                }
                case "Erase" -> {
                    drawCircles(BG_COLOR);
                    deBtn.setText("Draw");
                    stroke = false;
                }
                default ->
                    Platform.exit();
            }
        });

        Button exBtn = new Button("Exit");
        exBtn.setPrefWidth(BUTTON_WIDTH);
        exBtn.setOnAction(e -> Platform.exit());

        TilePane tp = new TilePane();
        tp.setAlignment(Pos.CENTER);
        tp.setHgap(10);
        tp.getChildren().addAll(deBtn, exBtn);

        VBox root = new VBox();
        root.setPadding(new Insets(7));
        root.setSpacing(10);
        root.setAlignment(Pos.CENTER);
        root.getChildren().addAll(versionLabel, canvasRef, tp);

        StackPane sp = new StackPane(root);
        BackgroundFill bf = new BackgroundFill(BG_COLOR, CornerRadii.EMPTY, Insets.EMPTY);
        Background bg = new Background(bf);
        sp.setBackground(bg);

        Scene scene = new Scene(sp, 640.0, 480.0);

        stage.setScene(scene);
        stage.show();
    }

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

}

Answered By - trashgod
Answer Checked By - Terry (JavaFixing Volunteer)