Issue with drawRect/fillRect from Swing Library (Images included)

Question

Just started messing around with Swing for a class project GUI in Java. I'm trying to draw a game board, however, not a conventional one. I'm trying to draw one more like a parchessi board, so each board tile needs to have a specific location rather than a grid.

So far, I've run into this issue. In paint(), I'm trying to paint 5 rectangles, odd ones blue and empty, even ones red and filled in. However, instead of a nice checkered pattern, I get this:

Can anyone help me figure out why it's doing this?

Code:

import java.awt.Color;
import java.awt.Graphics;

import javax.swing.JFrame;
import javax.swing.JPanel;

public class Rectangles extends JPanel {

   public static void main(String[] a) {
      JFrame f = new JFrame();
      f.setSize(800, 800);
      f.add(new Rectangles());
      f.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
      f.setVisible(true);
   }

   public void paint(Graphics g) {
      int x = 15;
      int y = 15;
      int w = 15; 
      int h = 15;
      for(int i = 0; i < 5; i++){
          if(i%2==0){
              g.setColor(Color.RED);
              g.fillRect (x, y, x+w, y+h);
          }
          else{
              g.setColor(Color.BLUE);
              g.drawRect (x, y, x+w, y+h);
          }
          x+=15;
          System.out.println(Integer.toString(x) + ' ' + Integer.toString(y) + '|' + Integer.toString(w) + ' ' + Integer.toString(h));
      }
   }
}

Output from the Println statement(x,y,width,height):

30 15|15 15
45 15|15 15
60 15|15 15
75 15|15 15
90 15|15 15

It looked like there was overlap in the first image, so I modified the code and tried this:

  for(int i = 0; i < 5; i++){
      g.setColor(Color.BLUE);
      g.drawRect (x, y, x+w, y+h);    
      x+=15;
   }

Here's what happens with this code:

Why is there overlap? What causes this?

Also, does anyone know a good way to make an easily modifiable array of Rectangles? Or any good advice or tools for drawing that type of board?

Answer 1

Welcome to the reasons you should not break the paint chain...

Start by calling super.paint(g) as the first line of your paint method, before you do any custom painting.

A better solution would be to override paintComponent instead of paint, but still making sure you call super.paintComponent before you perform any custom painting...

Take a look at Performing Custom Painting and Painting in AWT and Swing for more details

Next, start reading the JavaDocs on Graphics#fillRect, you will see that the last two parameters represent the width and height, not the x/y position of the bottom corner

public class Rectangles extends JPanel {

    @Override
    protected void paintComponent(Graphics g) {
        super.paintComponent(g);
        int x = 15;
        int y = 15;
        int w = 15;
        int h = 15;
        for (int i = 0; i < 5; i++) {
            if (i % 2 == 0) {
                g.setColor(Color.RED);
                g.fillRect(x, y, w, h);
            } else {
                g.setColor(Color.BLUE);
                g.drawRect(x, y, w, h);
            }
            x += 15;
            System.out.println(Integer.toString(x) + ' ' + Integer.toString(y) + '|' + Integer.toString(w) + ' ' + Integer.toString(h));
        }
    }
}