How to use Canvas to draw multiple rectangles based on user input?

Question

So basically I'm writing a program where the user clicks and drags the mouse to a size he/she wants, and lets go, filling in a rectangle based on the choice from the JComboBox.

What I have implemented is MouseListener and MouseMotionListener to track the location of the mouse, and draw a rectangle based on where the user first clicked, to where it was let go.

When the user clicks and drags (but does not let go), there is a drawRect() but not a fillRect() (as in, the rectangle does not fill - only when the user releases the mouse does the rectangle fill with the color).

This class creates a Rect object that has another part in the constructor, which is the color that is selected (which is determined in the ColorListener class below).

This is where I included my instance variables, and everything is instantiated in the constructor below:

private ArrayList<Rect> rectList;
private Color currentColor;
private Canvas canvas;
private JPanel controlPanel;
private JButton undo, erase;
private JComboBox comboBox;
private int xStart, yStart, xEnd, yEnd;
private Graphics page;
private Point pt = null;
private PointListener pointListener;
private ColorListener colorListener;

public WholePanel()
{
    // here we use black to draw a rectangle
    currentColor = Color.black;
    pointListener = new PointListener();
    addMouseListener(pointListener);
    addMouseMotionListener(pointListener);

    String[] listOfColors = {"black", "red", "blue", "green", "orange"};

    comboBox = new JComboBox(listOfColors);
    comboBox.setSelectedIndex(0);

    rectList = new ArrayList<Rect>();
    controlPanel = new JPanel(new GridLayout(1,3));

    undo = new JButton("Undo");
    erase = new JButton("Erase");
    controlPanel.add(comboBox);
    controlPanel.add(undo);
    controlPanel.add(erase);
    undo.addActionListener(new ButtonListener());
    erase.addActionListener(new ButtonListener());

    canvas = new Canvas();

    JSplitPane sp = new JSplitPane(JSplitPane.VERTICAL_SPLIT, controlPanel, canvas);

    setLayout(new BorderLayout());
    add(sp);
}

The Rect class can create a Rect object used later.

public class Rect
{
private int x1, y1, width1, height1;
private Color color1;

public Rect(int x, int y, int width, int height, Color color)
{
    x1 = x;
    y1 = y;
    width1 = width;
    height1 = height;
    color1 = color;
}

public void draw(Graphics page)
{
    page.setColor(color1);
    page.drawRect(x1,y1,width1,height1);
}
}

The Canvas class creates the space that allows for drawing of an object.

private class Canvas extends JPanel
{

    public void paintComponent(Graphics page)
    {
        super.paintComponent(page);
        setBackground(Color.white);
        if (pt != null)
        {
            Rect rect = new Rect(xStart, yStart, xEnd-xStart, yEnd-yStart, currentColor);
            rect.draw(page);
        }
    }
}

The PointListener class finds all the points that are there, as in where the user clicks, to where the user drags, and also to where the user releases.

private class PointListener implements MouseListener, MouseMotionListener
{
    public void mousePressed(MouseEvent event)
    {
        pt = event.getPoint();
        xStart = pt.x;
        yStart = pt.y;
    }
    public void mouseReleased(MouseEvent event)
    {
        pt = event.getPoint();
        if (pt != null)
        {
            xEnd = pt.x;
            yEnd = pt.y;
            page.fillRect(xStart, yStart, xEnd-xStart, yEnd-yStart);
        }
    }
    public void mouseClicked(MouseEvent event) {}
    public void mouseEntered(MouseEvent event) {}
    public void mouseExited(MouseEvent event) {}
    public void mouseDragged(MouseEvent event)
    {
        pt = event.getPoint();
        if (pt != null)
        {
            xEnd = pt.x;
            yEnd = pt.y;
            Rect rect = new Rect(xStart, yStart, xEnd-xStart, yEnd-yStart, currentColor);
            rect.draw(page);
        }
        repaint();
    }
    public void mouseMoved(MouseEvent event) {}

}

ColorListener finds the type of object that is selected in the JComboBox determined in the main() method, and sets the currentColor to it (it is put back as the color in the Rect constructor above).

private class ColorListener implements ActionListener
{
    public void actionPerformed(ActionEvent event)
    {
        if (event.getSource().equals("black"))
        {
            currentColor = Color.black;
            comboBox.setSelectedIndex(0);
        }
        else if (event.getSource().equals("red"))
        {
            currentColor = Color.red;
            comboBox.setSelectedIndex(1);
        }
        else if (event.getSource().equals("blue"))
        {
            currentColor = Color.blue;
            comboBox.setSelectedIndex(2);
        }
        else if (event.getSource().equals("green"))
        {
            currentColor = Color.green;
            comboBox.setSelectedIndex(3);
        }
        else if (event.getSource().equals("orange"))
        {
            currentColor = Color.orange;
            comboBox.setSelectedIndex(4);
        }
    }
}

So what I am having trouble with is being able to draw it. I don't see any flaws in logic in the program so far above, and nothing is being able to be drawn onto the Canvas (don't worry about the JButtons Undo and Erase, as they are easy to work with with an ArrayList and remove() and clear() and things like that).

Solution

Your program should have no Graphics field that is a class field (your page class field). I'm surprised your not seeing a NullPointException with the way you're attempting to use it above in say your Mouse Listener class:

public void mouseReleased(MouseEvent event)
{
    pt = event.getPoint();
    if (pt != null)
    {
        xEnd = pt.x;
        yEnd = pt.y;


        // !!!! don't do this !!!!
        page.fillRect(xStart, yStart, xEnd-xStart, yEnd-yStart);
    }
}

Instead the Graphics object should only be obtained from the JVM, should only exist within the paintComponent method and should only be used within the same paintComponent method (exceptions being any methods called from with paintComponent that are passed this object and of course a Graphics object obtained from a BufferedImage). The MouseListener/MouseMotionListener should fill in your x-start, y-start, x-end, and y-end variables during mouseDragged, and then on mouseRelease these variables should be used to create a new Rect object that is placed in the rectList, and then repaint called.

Then paintComponent should iterate through rectList, filling each Rect object it finds there.