Draw Overlapping Path with Outline

Java 2D
#1

My goal is to draw a path with both an outline and a fill color. Think about the way a figure-eight racetrack might look, or how a tangled-up wire might look. Something like this:

To accomplish this, I’ve tried simply using two BasicStrokes to draw a Path2D. The first BasicStroke is thicker and drawn in black, and the second is thinner and drawn in red. This almost accomplishes what I want, except the places on the curve that overlap itself are drawn as an intersection instead of an overlap:

Notice how if this was a racetrack, the cars would be able to turn anytime the track overlapped itself, when instead it should appear to be on top of itself with the black border of the top layer showing on top of the red fill of the bottom layer.

I’ve also tried using a custom DoubleStroke from this page, but the results are similar to the above problem.

Here’s my code so far:

import java.awt.BasicStroke;
import java.awt.Color;
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.event.MouseAdapter;
import java.awt.event.MouseEvent;
import java.awt.geom.Path2D;

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

public class Defuse extends JPanel{

	Path2D.Double path = new Path2D.Double();

	public Defuse(){
		
		path.moveTo(0, 0);
		
		for(int i = 0; i < 5; i++){
			path.curveTo(Math.random()*250, Math.random()*500, Math.random()*250, Math.random()*500, Math.random()*250, Math.random()*500);
		}
	
		addMouseListener(new MouseAdapter(){
			
			
//			Point one = new Point(0, 0);
//			Point two = new Point(125, 250);
//			Point three = new Point(250, 500);
			
			@Override
			public void mouseClicked(MouseEvent e) {
				
//				if(e.getButton() == MouseEvent.BUTTON1){
//					one = e.getPoint();
//				}
//				else if(e.getButton() == MouseEvent.BUTTON2){
//					two = e.getPoint();
//				}
//				else if(e.getButton() == MouseEvent.BUTTON3){
//					three = e.getPoint();
//				}
//				
//				
				path = new Path2D.Double();
				path.moveTo(125, 0);
				
			//	path.curveTo(one.x, one.y, two.x, two.y, three.x, three.y);
				
				for(int i = 0; i < 5; i++){
					path.curveTo(Math.random()*250, Math.random()*500, Math.random()*250, Math.random()*500, Math.random()*250, Math.random()*500);
				}
				path.quadTo(path.getCurrentPoint().getX(), path.getCurrentPoint().getY(), 125, 500);
				
				repaint();
			}
		});
	}




	public void paintComponent(Graphics g){
		super.paintComponent(g);
		
		Graphics2D g2d = (Graphics2D)g;
		
		float thickness = 8;
		
		BasicStroke bs = new BasicStroke(6);
		
		g2d.setStroke(bs);
		g2d.setColor(Color.BLACK);
		g2d.draw(path);
		
		bs = new BasicStroke(thickness-4);
	
		g2d.setStroke(bs);
		g2d.setColor(Color.RED);
		g2d.draw(path);
		
		

	}


	public static void main(String... args){


		JFrame frame = new JFrame("Defuse");
		frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
		frame.add(new Defuse());

		frame.setSize(250, 500);
		frame.setVisible(true);

	}
	
}

I’d also like to avoid sharp corners in my creation of the Path2D (cars can’t make 120 degree turns around a track), but that’s a separate problem for now. I appreciate any input you can give me!