Problem Drawing Grid with BufferedImage.

[Shikatsu]

Greetings EveryOne :D

I am learning to draw with BufferedImage, I managed to save my grid in memory with BufferedImage object and then display the grid in an applet, the problem is the background of the created grid is black and it's outline is white as far as I can tell, so as you can see it should be the other way around.

Here is my code:

import java.applet.*;
import java.awt.*;
import java.awt.geom.*;
import java.awt.image.*;

public class DrawGrid extends Applet
{
    private final int GridSize = 58;
    private final int GridRows = 8;
    private final int GridColumns = 8;
    
    private int BoardWidth  = GridColumns * GridSize;
    private int BoardHeight = GridRows    * GridSize;
    
    private int WinWidth  = BoardWidth+140;
    private int WinHeight = BoardHeight+158;
    
    BufferedImage BuffImg = new BufferedImage(464, 464, 
                                              BufferedImage.TYPE_INT_BGR);
    
    Graphics2D Grid;
    
    @Override
    public void init()
    {
        setSize(WinWidth,WinHeight);
        
        repaint();
    }
    
    @Override
    public void paint(Graphics G)
    {
        Grid = (Graphics2D)G;

        InitGrid(Grid);
        
        Grid.drawImage(BuffImg, null, GridSize, GridSize);
    }
    
    public void InitGrid(Graphics2D G2D)
    {
        G2D.setColor(Color.black);
        G2D.setBackground(Color.white);
        
        for(int Row = 1; Row <= GridRows; Row++)
        {
            for(int Column = 1; Column <= GridColumns; Column++)
            {
                Shape square = new Rectangle2D.Double(
                ((Column-1)*GridSize), 
                ((Row   -1)*GridSize),
                (Column*GridSize), 
                (Row   *GridSize));
                
                G2D = BuffImg.createGraphics();

                G2D.draw(square);
            }
        }
    }
}

Can you guide me to the right direction to solve this, Please.

Thank You :D

[Norm]

Try filling a rectangle with the background color and drawing over it in the other color.

[Shikatsu]

Thank you Mr. Norm, it worked but it took me a little while to make it

If anyone cares to know how it's done, here is the code:

import java.applet.*;
import java.awt.*;
import java.awt.geom.*;
import java.awt.image.*;

public class DrawGrid extends Applet
{
    private final int GridSize = 58;
    private final int GridRows = 8;
    private final int GridColumns = 8;
    
    private int BoardWidth  = GridColumns * GridSize;
    private int BoardHeight = GridRows    * GridSize;
    
    private int WinWidth  = BoardWidth+140;
    private int WinHeight = BoardHeight+158;
    
    BufferedImage BuffImg = new BufferedImage(465, 465,
                                              BufferedImage.TYPE_INT_BGR);
    
    Graphics2D Grid;
    
    @Override
    public void init()
    {
        setSize(WinWidth,WinHeight);
        
        repaint();
    }
    
    @Override
    public void paint(Graphics G)
    {
        Grid = (Graphics2D)G;

        InitGrid(Grid);
        
        Grid.drawImage(BuffImg, null, GridSize, GridSize);
    }
    
    public void InitGrid(Graphics2D G2D)
    {
        G2D.setColor(Color.green);
        G2D.setBackground(Color.green);
        
        for(int Row = 1; Row <= GridRows+1; Row++)
        {
            for(int Column = 1; Column <= GridColumns+1; Column++)
            {
                Shape square = new Rectangle2D.Double(
                ((Column-1)*GridSize), 
                ((Row   -1)*GridSize),
                (Column*GridSize), 
                (Row   *GridSize));
                
                G2D = BuffImg.createGraphics();
                
                G2D.setColor(Color.white);
                
                G2D.fillRect(
                ((Column-1)*GridSize), 
                ((Row   -1)*GridSize),
                (Column*GridSize), 
                (Row   *GridSize));
                
                G2D.setColor(Color.red);
                
                G2D.draw(square);
            }
        }
    }
}

Note, I had to add one pixel to the width and height of the initialized BufferedImage for the last horizontal and vertical lines to show up:

BufferedImage BuffImg = new BufferedImage(465, 465, //464
                                              BufferedImage.TYPE_INT_BGR);

And that can make sense, but what doesn't make sense is that I have to add another row & column of cells for the last lines to show up, you can see it here:

        for(int Row = 1; Row <= GridRows+1; Row++)
        {
            for(int Column = 1; Column <= GridColumns+1; Column++)
            {
                  // same code goes here...
            }
        }

For me it makes sense doing this:

        for(int Row = 1; Row <= GridRows; Row++)
        {
            for(int Column = 1; Column <= GridColumns; Column++)
            {               
                Shape square = new Rectangle2D.Double(
                ((Column-1)*GridSize), 
                ((Row   -1)*GridSize),
                ((Column+1)*GridSize), 
                ((Row   +1)*GridSize));
                
                G2D = BuffImg.createGraphics();
                
                G2D.setColor(Color.white);
                
                G2D.fillRect(
                ((Column-1)*GridSize), 
                ((Row   -1)*GridSize),
                ((Column+1)*GridSize), 
                ((Row   +1)*GridSize));
                
                G2D.setColor(Color.red);
                
                G2D.draw(square);
            }
        }

But it doesn't work in that case, Do you have an explanation for this, please share if you do.

Thank You.

[Norm]

There are several issues with your code.
You should only call InitGrid one time to build the image to be drawn in paintComponent.
In InitGrid you give a value to G2D inside the loop vs one time outside of the loop.

But it doesn't work in that case,

Please explain???

[Shikatsu]

You should only call InitGrid one time to build the image to be drawn in paintComponent.

How does this look:

public class DrawGrid extends Applet
{
    private final int GridSize = 58;
    private final int GridRows = 8;
    private final int GridColumns = 8;
    
    private int BoardWidth  = GridColumns * GridSize;
    private int BoardHeight = GridRows    * GridSize;
    
    private int WinWidth  = BoardWidth+140;
    private int WinHeight = BoardHeight+158;
    
    BufferedImage BuffImg = new BufferedImage(465, 465, //464
                                              BufferedImage.TYPE_INT_BGR);
    
    Graphics2D Grid;
    
    @Override
    public void init()
    {
        setSize(WinWidth,WinHeight);

        InitGrid(Grid);
        
        repaint();
    }
        
    @Override
    public void paint(Graphics G)
    {
        Grid = (Graphics2D)G;

        Grid.drawImage(BuffImg, null, GridSize, GridSize);
    }
    
    public void InitGrid(Graphics2D G2D)
    {
        for(int Row = 1; Row <= GridRows+1; Row++)
        {
            for(int Column = 1; Column <= GridColumns+1; Column++)
            {
                Shape square = new Rectangle2D.Double(
                ((Column-1)*GridSize),
                ((Row   -1)*GridSize),
                (Column*GridSize),
                (Row   *GridSize));
                 
                G2D = BuffImg.createGraphics();
                 
                G2D.setColor(Color.white);
                 
                G2D.fillRect(
                ((Column-1)*GridSize),
                ((Row   -1)*GridSize),
                (Column*GridSize),
                (Row   *GridSize));
                 
                G2D.setColor(Color.red);
                 
                G2D.draw(square);
            }
        }
    }
}

In InitGrid you give a value to G2D inside the loop vs one time outside of the loop.

Do you mean this:

public void InitGrid(Graphics2D G2D)
    {
        G2D.setColor(Color.green);
        G2D.setBackground(Color.green);
         //.....

If it is, i just forgot to clear that up, if its something else please point it out.

Please explain???

If you run the code, you will notice the grid doesn't show when doing this:

for(int Row = 1; Row <= GridRows; Row++)
{
    for(int Column = 1; Column <= GridColumns; Column++)
    {              
        Shape square = new Rectangle2D.Double(
        ((Column-1)*GridSize),
        ((Row   -1)*GridSize),
        ((Column+1)*GridSize),
        ((Row   +1)*GridSize));
         
        G2D = BuffImg.createGraphics();
         
        G2D.setColor(Color.white);
         
        G2D.fillRect(
        ((Column-1)*GridSize),
        ((Row   -1)*GridSize),
        ((Column+1)*GridSize),
        ((Row   +1)*GridSize));
         
        G2D.setColor(Color.red);
         
        G2D.draw(square);
    }
}

Instead of adding another row & column of cells for the last lines to show up, as you can see here:

for(int Row = 1; Row <= GridRows+1; Row++)
        {
            for(int Column = 1; Column <= GridColumns+1; Column++)
            {
                Shape square = new Rectangle2D.Double(
                ((Column-1)*GridSize),
                ((Row   -1)*GridSize),
                (Column*GridSize),
                (Row   *GridSize));
                 
                G2D = BuffImg.createGraphics();
                 
                G2D.setColor(Color.white);
                 
                G2D.fillRect(
                ((Column-1)*GridSize),
                ((Row   -1)*GridSize),
                (Column*GridSize),
                (Row   *GridSize));
                 
                G2D.setColor(Color.red);
                 
                G2D.draw(square);
            }
        }
    }

Thank You For your help and please I still need guidance on this.

[Norm]

Line 49 should be done once outside of the loop

Why pass the Graphics object to the initGrid method?

[Shikatsu]

Line 49 should be done once outside of the loop

You mean Line 48 :D, here I worked that up:

    public void InitGrid(Graphics2D G2D)
    {
        G2D = BuffImg.createGraphics();
        
        for(int Row = 1; Row <= GridRows+1; Row++)
        {
            for(int Column = 1; Column <= GridColumns+1; Column++)
            {
                Shape square = new Rectangle2D.Double(
                ((Column-1)*GridSize),
                ((Row   -1)*GridSize),
                (Column*GridSize),
                (Row   *GridSize));
                 
                G2D.setColor(Color.white);
                 
                G2D.fillRect(
                ((Column-1)*GridSize),
                ((Row   -1)*GridSize),
                (Column*GridSize),
                (Row   *GridSize));
                 
                G2D.setColor(Color.red);
                 
                G2D.draw(square);
            }
        }
    }

Why pass the Graphics object to the initGrid method?

You mean this is better?

public class DrawGrid extends Applet
{
    private final int GridSize = 58;
    private final int GridRows = 8;
    private final int GridColumns = 8;
    
    private int BoardWidth  = GridColumns * GridSize;
    private int BoardHeight = GridRows    * GridSize;
    
    private int WinWidth  = BoardWidth+140;
    private int WinHeight = BoardHeight+158;
    
    BufferedImage BuffImg = new BufferedImage(465, 465, //464
                                              BufferedImage.TYPE_INT_BGR);
    
    Graphics2D Grid;
    
    @Override
    public void init()
    {
        setSize(WinWidth,WinHeight);

        InitGrid();
        
        repaint();
    }
        
    @Override
    public void paint(Graphics G)
    {
        Grid = (Graphics2D)G;

        Grid.drawImage(BuffImg, null, GridSize, GridSize);
    }
    
    public void InitGrid()
    {
        Grid = BuffImg.createGraphics();
        
        for(int Row = 1; Row <= GridRows+1; Row++)
        {
            for(int Column = 1; Column <= GridColumns+1; Column++)
            {
                Shape square = new Rectangle2D.Double(
                ((Column-1)*GridSize),
                ((Row   -1)*GridSize),
                (Column*GridSize),
                (Row   *GridSize));
                 
                Grid.setColor(Color.white);
                 
                Grid.fillRect(
                ((Column-1)*GridSize),
                ((Row   -1)*GridSize),
                (Column*GridSize),
                (Row   *GridSize));
                 
                Grid.setColor(Color.red);
                 
                Grid.draw(square);
            }
        }
    }
}

If it is, can you explain when please.

[Norm]

Yes those were the things I was talking about.

[Shikatsu]

About not passing Grid to initGrid method how can that be better coding? noting that Grid must be reinitialized in pain() for the grid to show up.

[Norm]

noting that Grid must be reinitialized in paint() for the grid to show up.

You can delete your class variable: Grid it is not needed. Define it locally in InitGrid and paint as needed for the casting to Graphics2D

[Shikatsu]

Done Thank you for you help Mr. Norm :D