DEV Community

loading...

Why does my canvas implementation keep blinking?

baenencalin profile image Calin Baenen ・2 min read

So, a little after I got a working player character in the Python version of RuntDeale, I started moving it to Java, and, progress has been pretty smooth. I got the window, icon, and the resources folders all working how they should.
But, when I tried making my own canvas implementation, it keeps blinking when I keep updating it. And if I don't update it, it just shows nothingness (just a white screen).

This is what the class looks like:

/**
* Calin Baenen's version of a canvas element.
*/
class CPane {

    // Debug variables.
    /**
    * The canvas itself.
    */
    private final JPanel canvas; // Canvas.
    /**
    * The buffer that adds data to the canvas.
    */
    private BufferedImage buffer; // Buffer.



    // Constructor.
    public CPane(int width, int height) {
        this(0, 0, width, height);
    }
    public CPane(int width, int height, Color initialColor) {
        this(0, 0, width, height, initialColor);
    }
    public CPane(int x, int y, int width, int height) {
        this(x, y, width, height, Color.WHITE);
    }
    public CPane(int x, int y, int width, int height, Color initialColor) {
        this(x, y, width, height, initialColor, Color.WHITE);
    }
    public CPane(int x, int y, int width, int height, Color initialColor, Color baseColor) {

        this.canvas = new JPanel(); // Make an element to display the drawing on.
        canvas.setBounds(x, y, width, height); // Set the bounds of the canvas.
        canvas.setBackground(baseColor); // Make the canvas white.
        canvas.setDoubleBuffered(true); // Make the canvas double buffered.

        buffer = new BufferedImage(width, height, BufferedImage.TYPE_INT_ARGB); // Set the buffer.
        Graphics ctx = buffer.getGraphics(); // Get the graphics for the buffer.

        // Paint the image with an initisl color.
        ctx.setColor(initialColor); // Set color.
        ctx.drawRect(0, 0, width, height); // Draw.
        ctx.dispose(); // Dispose.

    }



    /**
    * Draws a rectangle to the screen by filling an area with color.
    */
    public void drawRect(int x, int y, int width, int height, Color color) {
        Graphics ctx = buffer.getGraphics(); // Get the graphics.
        ctx.setColor(color); // Set the context's color.
        ctx.fillRect(x, y, width, height); // Draw a rectangle.
        ctx.dispose(); // Dispose the graphics.
        this.update(); // Update the canvas.
    }



    /**
    * Draw an image to the canvas.
    */
    public void drawImage(Image image, int x, int y) {
        this.drawImage(image, x, y, image.getWidth(null), image.getHeight(null));
    }
    /**
    * Draw an image to the canvas.
    */
    public void drawImage(Image image, int x, int y, int width, int height) {
        Image shot = image.getScaledInstance(width, height, Image.SCALE_FAST); // Get the scaled image to draw.
        Graphics ctx = buffer.getGraphics(); // Get the graphics.
        ctx.drawImage(shot, x, y, null); // Draw the image.
        ctx.dispose(); // Dispose.
        this.update(); // Update the canvas.
    }



    /**
    * Update the graphics.
    */
    public void update() {
        try {
            Graphics display = canvas.getGraphics(); // Get the display graphics.
            display.drawImage(buffer, 0, 0, null); // Draw the bufer.
            display.dispose(); // Dispose the display.
        } catch(Exception error) {}
    }

}
Enter fullscreen mode Exit fullscreen mode

I know it's probably within the update method itself, but, how can I fix this bug?

Thanks!
Cheers!

Discussion (2)

pic
Editor guide
Collapse
oliverobenland profile image
Oliver Obenland

It’s a Long time since I used Java and implemented double buffering. I’m not sure if I am correct. But my first finding, which I think is not necessary: you create and dispose the graphics ctx of the buffer. Just use the one you created in the constructor. And I don’t think you should dispose the panels Graphics. Just try it and observe for memory

Collapse
baenencalin profile image
Calin Baenen Author

Thanks for the tip. Though, when I tried this, the canvas didn't draw anything (it stayed white). Where previously, it displayed an image, then went to black (which is where the flickering started).