JAVA swing gui window gets jarred after repaint method is run

Question

I'm beginning to learn Java Swing. I was trying to create a GUI in which there are 2 buttons, changeColor on the bottom and changeLabel on right. It has a label on right and at the center a JPanel which shows a gradient colored oval.

When I click on changeLabel, it works fine and changes the label on left. But when I click on changeColor, a new oval appears and the whole layout breaks, with some new panels superimposing. I am following a book in which the same thing is given, but it uses random color generation in the paintComponent method, which I learned from here, isn't a good thing to do. That method works fine, but I tried to avoid that and make a separate method. This is not working though.

GUI class:

import javax.swing.*;
import java.awt.*;
import java.awt.event.*;

public class TwoButtons {
    public JFrame frame;
    private JLabel label;
    private MyDrawPanel panel;
    private boolean clicked = false;

    public static void main(String[] args) {
        TwoButtons gui = new TwoButtons();
        gui.go();
    }

    public void go() {
        frame = new JFrame();
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        JButton labelButton = new JButton("Change Label");
        labelButton.addActionListener(new LabelListener());

        JButton colorButton = new JButton("Change color");
        colorButton.addActionListener(new ColorListener());

        label = new JLabel("I'm a label");
        panel = new MyDrawPanel();
        frame.getContentPane().add(BorderLayout.SOUTH, colorButton);
        frame.getContentPane().add(BorderLayout.CENTER, panel);
        frame.getContentPane().add(BorderLayout.EAST, labelButton);
        frame.getContentPane().add(BorderLayout.WEST, label);

        frame.setSize(300, 300);
        frame.setVisible(true);
    }

    class LabelListener implements ActionListener {
        @Override
        public void actionPerformed(ActionEvent e) {
            if (!clicked) {
                label.setText("Ouch!! (Click again to revert)");
                clicked = true;
            } else {
                clicked = false;
                label.setText("Change Label");
            }
        }
    }

    class ColorListener implements ActionListener {
       @Override//
       public void actionPerformed(ActionEvent e) {
           //frame.repaint();
               panel.changeColors();
    }
}
}

Coloring class:

import javax.swing.*;
import java.awt.*;

public class MyDrawPanel  extends  JPanel{
    private Color startColor,endColor;
    public MyDrawPanel(){
        this.changeColors();
    }
    public void  paintComponent(Graphics g){
        Graphics2D g2D=(Graphics2D)g;
        GradientPaint gradient=new GradientPaint(70,70,startColor,150,150,endColor);
        g2D.setPaint(gradient);
        g2D.fillOval(70,70,100,100);
    }
    public void changeColors(){
        int red = (int) (Math.random() * 255);
        int green = (int) (Math.random() * 255);
        int blue = (int) (Math.random() * 255);
        startColor = new Color(red, green, blue);
        red = (int) (Math.random() * 255);
        green = (int) (Math.random() * 255);
        blue = (int) (Math.random() * 255);
        endColor = new Color(red, green, blue);
        this.repaint();

    }

}

Before clicking change color

After clicking on change color

Answer 1

To avoid rendering artifacts:

public void paintComponent(Graphics g){ .. 

Should be:

public void paintComponent(Graphics g){ 
    super.paintComponent(g); .. 

By calling the super method, it will automatically repaint the background and borders etc., thus erasing the earlier drawing.