Paint is drawing under the line instead of on top of it - Java

Question

To get a better understanding, I suggest running the program, but basically every time I draw a line, the new line is going under the old line instead of on top of it. I'm sure it's just some minor logic error, but any suggestions on how to fix something like this would be great. The code is below, it will compile and is executable. I have set the erase button to white on a black background so you can see what is happening. Thanks!

import java.awt.*;
import java.awt.event.*;
import java.awt.geom.*;
import java.util.ArrayList;
import java.util.List;
import javax.swing.*;

public class SimplePaint extends JFrame implements ActionListener {

    private static final long serialVersionUID = 1L;
    JButton action = new JButton();
    JButton red = new JButton();
    JButton blue = new JButton();
    JButton yellow = new JButton();
    Color initial = Color.MAGENTA;
    JButton thin = new JButton();
    JButton medium = new JButton();
    JButton thick = new JButton();
    Stroke stroke = new BasicStroke(3);
    private static ArrayList<Point> points = new ArrayList<Point>();

    JButton erase = new JButton();
    JButton drawing = new JButton();
    Point start = null;
    Point end = null;
    Line2D draw = new Line2D.Float();
    JPanel panel = new JPanel();

    private class Segment {
        private final List<Point> points = new ArrayList<Point>();
        private final Color color = initial;
        private final Stroke stroke = SimplePaint.this.stroke;
    }

    private final List<Segment> segments = new ArrayList<>();

    public SimplePaint() {
        getContentPane().add(panel);
        setSize(450, 450);
        setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

        design();

        addMouseListener(new MouseAdapter() {
            public void mousePressed(MouseEvent e) {
                segments.add(0, new Segment());
            }
       });

        addMouseMotionListener(new MouseMotionAdapter() {
            public void mouseDragged(MouseEvent e) {
                segments.get(0).points.add(e.getPoint());
                repaint();
            }
        });

        addMouseMotionListener(new MouseMotionAdapter(){

            @Override
            public void mouseDragged(MouseEvent e){
                points.add(e.getPoint());
                repaint();
            }
        });

        blue.addActionListener(this);
        red.addActionListener(this);
        yellow.addActionListener(this);
        thin.addActionListener(this);
        medium.addActionListener(this);
        thick.addActionListener(this);
        erase.addActionListener(this);
        drawing.addActionListener(this);
    }

    public void design() {
        panel.setBackground(Color.BLACK);

        blue.setBackground(Color.BLUE);
        blue.setPreferredSize(new Dimension(50, 25));
        panel.add(blue);

        red.setBackground(Color.RED);
        red.setPreferredSize(new Dimension(50, 25));
        panel.add(red);

        yellow.setBackground(Color.yellow);
        yellow.setPreferredSize(new Dimension(50, 25));
        panel.add(yellow);

        thin.setText("Thin");
        panel.add(thin);

        medium.setText("Medium");
        panel.add(medium);

        thick.setText("Thick");
        panel.add(thick);

        erase.setText("Erase");
        panel.add(erase);

        drawing.setText("Draw");
        panel.add(drawing);
    }

    public void actionPerformed(ActionEvent e) {
        if(e.getSource() == blue){
            initial = Color.BLUE;
        }else if(e.getSource() == red){
            initial = Color.RED;
        }else if(e.getSource() == yellow){
            initial = Color.YELLOW;
        }else if(e.getSource() == thin){
            stroke = new BasicStroke(1);
        }else if(e.getSource() == medium){
            stroke = new BasicStroke(5);
        }else if(e.getSource() == thick){
            stroke = new BasicStroke(10);
        }else if(e.getSource() == erase){
            initial = Color.WHITE;
            stroke = new BasicStroke(15);
        }

        //repaint();
    }

    @Override
    public void paint(Graphics g) {
        super.paint(g);
        Graphics2D g2 = (Graphics2D) g;

        int x1, y1, x2, y2;

        for (Segment segment : segments) {
            g2.setColor(segment.color);
            g2.setStroke(segment.stroke);

            for (int p = 0; p < segment.points.size() - 1; p++) {
                x1 = segment.points.get(p).x;
                y1 = segment.points.get(p).y;
                x2 = segment.points.get(p + 1).x;
                y2 = segment.points.get(p + 1).y;
                g2.drawLine(x1, y1, x2, y2);


            }

        }
        g2.dispose();

    }  

    public static void main(String []args){
        SimplePaint s = new SimplePaint();
        s.setVisible(true);
    }
}

Answer 1

Calls to g2.drawLine will overwrite anything already painted into your graphics context. You're iterating over segments in-order, so whatever segment is first in the list will be drawn first, with everything that follows being drawn over it. When you create a new Segment, you're inserting it into your list via Segments.add(0, newSegment), which puts the newest segment at the front of the list - meaning your list has the segments arranged from newest to oldest. To fix this, you can either iterate over your list in the reverse order, or change your segment-painting code so that new segments get added at the end of the list, instead of the front of it.