Why is the canvas not clearing after applying effect by ColorAdjust?

Question

After applying the color adjust effect and redrawing the canvas , the canvas is not being cleared so that i can update the canvas with some other image, the images are overlapping.

I have a Border Pane containing Scroll Pane to adjust large images The scroll Pane contains the canvas

A function that clears the canvas then adjusts the brightness and applies the effect on canvas.

import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Group;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.scene.canvas.Canvas;
import javafx.scene.canvas.GraphicsContext;
import javafx.scene.control.ScrollPane;
import javafx.scene.effect.ColorAdjust;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.layout.BorderPane;
import javafx.stage.Stage;

public class Main extends Application {


    Stage primaryStage;

    // load the image
    Image image = new Image("https://upload.wikimedia.org/wikipedia/commons/thumb/1/14/Gatto_europeo4.jpg/1024px-Gatto_europeo4.jpg");

    // the container for the image as a javafx node
    Canvas canvas = new Canvas(600,700);

    GraphicsContext gc = canvas.getGraphicsContext2D();

    @Override
    public void start(Stage primaryStage) throws Exception{
        this.primaryStage = primaryStage;
        primaryStage.setTitle("Test");

        BorderPane root = new BorderPane();

        // container for image layers
        ScrollPane scrollPane = new ScrollPane();


        // use scrollpane for image view in case the image is large
        scrollPane.setContent(canvas);

        gc.drawImage(image,0,0,canvas.getWidth(),canvas.getHeight());

        changeBrightness(canvas,image);// function to add effect on canvas 

        // put scrollpane in scene
        root.setCenter(scrollPane);
        primaryStage.setScene(new Scene(root, 780.0, 620.0));
        primaryStage.show();
    }

    private void changeBrightness(Canvas canvas, Image image) {
        //clearing canvas before changing brightness working
        gc.clearRect(0,0,canvas.getWidth(),canvas.getHeight());

        ColorAdjust colorAdjust = new ColorAdjust();
        colorAdjust.setBrightness(0.3);
        gc.setEffect(colorAdjust);

        gc.drawImage(image,0,0,canvas.getWidth(),canvas.getHeight());
        //trying to clear canvas after changing brightness
        gc.clearRect(0,0,canvas.getWidth(),canvas.getHeight());
        gc.drawImage(image,0,0,canvas.getWidth()/2,canvas.getHeight()/2);
    }


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

please don't shout (aka: unnecessary bolding) - and provide a [mcve] demonstrating the problem — kleopatra, Jun 02 '20 at 13:39
I have updated the problem .If you can please do look into it , I would be grateful and thank you for explaining what I did wrong before @kleopatra — nikhil gupta, Jun 02 '20 at 15:00

Snix · Accepted Answer · 2020-06-04T00:40:40.980

You have to remove the effect on your Graphics object before calling gc.clearRect(...)

Here the code:

package com.simple.test;

import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Group;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.scene.canvas.Canvas;
import javafx.scene.canvas.GraphicsContext;
import javafx.scene.control.ScrollPane;
import javafx.scene.effect.ColorAdjust;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.layout.BorderPane;
import javafx.stage.Stage;

public class Main extends Application {


    Stage primaryStage;

    // load the image
    Image image = new Image("https://upload.wikimedia.org/wikipedia/commons/thumb/1/14/Gatto_europeo4.jpg/1024px-Gatto_europeo4.jpg");

    // the container for the image as a javafx node
    Canvas canvas = new Canvas(600,700);

    GraphicsContext gc = canvas.getGraphicsContext2D();

    @Override
    public void start(Stage primaryStage) throws Exception{
        this.primaryStage = primaryStage;
        primaryStage.setTitle("Test");

        BorderPane root = new BorderPane();

        // container for image layers
        ScrollPane scrollPane = new ScrollPane();


        // use scrollpane for image view in case the image is large
        scrollPane.setContent(canvas);

        gc.drawImage(image,0,0,canvas.getWidth(),canvas.getHeight());

        changeBrightness(canvas,image);// function to add effect on canvas

        // put scrollpane in scene
        root.setCenter(scrollPane);
        primaryStage.setScene(new Scene(root, 780.0, 620.0));
        primaryStage.show();
    }

    private void changeBrightness(Canvas canvas, Image image) {
        //clearing canvas before changing brightness working
        gc.clearRect(0,0,canvas.getWidth(),canvas.getHeight());

        ColorAdjust colorAdjust = new ColorAdjust();
        colorAdjust.setBrightness(0.3);
        gc.setEffect(colorAdjust);

        gc.drawImage(image,0,0,canvas.getWidth(),canvas.getHeight());
        // Remove the effect
        gc.setEffect(null);
        //trying to clear canvas after changing brightness
        gc.clearRect(0,0,canvas.getWidth(),canvas.getHeight());
        // Now apply again
        gc.setEffect(colorAdjust);
        // Redraw
        gc.drawImage(image,0,0,canvas.getWidth()/2,canvas.getHeight()/2);
        // Remove the effect again
        gc.setEffect(null);
    }


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

You may look at this for further information:
JavaFX GraphicsContext clearRect doesn't work with clip mask
Why won't gc.clearRect clear the canvas?

Btw, cat is cute.

Why is the canvas not clearing after applying effect by ColorAdjust?

1 Answers1