title: JavaFX Olympic Rings overlap in the correct order
body: <p>this is my first time posting here. I'm currently doing an assignment where I need to create the olympic rings in JavaFX and make them intersect in the correct places. </p>
  
  <p>This is what it's supposed to look like:</p>
  
  <p><a href="https://i.stack.imgur.com/n5qZr.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/n5qZr.png" alt="olympic rings"></a><br>
  <sub>(source: <a href="http://ksuweb.kennesaw.edu/~ashaw8/cs1302-07-Fall16/assignments/images/OlympicRings.png" rel="nofollow noreferrer">ashaw8 at ksuweb.kennesaw.edu</a>)</sub>  </p>
  
  <p>Currently, the rings intersect but they dominate in the order that I created the objects. Blue gets covered by yellow when they intersect, yellow gets covered by black when they intersect, etc. As you can see in the picture of the olympic rings, the first time yellow and blue intersect, yellow covers blue, but blue covers yellow the second time. Each of the rings gets covered by the other ring one time they intersect, but covers it the other time.</p>
  
  <p>If anyone could point me in the right direction as to how to make them intersect properly, that would be fantastic.</p>
  
  <p>Here is the code that I have so far:</p>
  
  <pre><code>package com.company;
  
  import javafx.application.Application;
  import javafx.scene.Scene;
  import javafx.scene.layout.Pane;
  import javafx.scene.paint.Color;
  import javafx.scene.shape.Circle;
  import javafx.stage.Stage;
  
  public class OlympicRings extends Application{
  
      public void start(Stage primaryStage) {
  
          //creates a new object, which will be the first circle
          Circle circle1 = new Circle();
          circle1.setCenterX(100); //sets the x coordinate for the center of the circle
          circle1.setCenterY(100); //sets the y coordinate for the center of the circle
          circle1.setRadius(50); //sets the radius of the circle to 50, makes the diameter 100
          circle1.setStroke(Color.BLUE); //sets the color of the circle
          circle1.setStrokeWidth(10); //sets the thickness of the lines
          circle1.setFill(null); //sets the color of the inside of the circle, set to null to enable overlap
  
          Circle circle2 = new Circle(); //creates additional circles
          circle2.setCenterX(160);
          circle2.setCenterY(150);
          circle2.setRadius(50);
          circle2.setStroke(Color.YELLOW);
          circle2.setStrokeWidth(10);
          circle2.setFill(null);
  
          Circle circle3 = new Circle();
          circle3.setCenterX(220);
          circle3.setCenterY(100);
          circle3.setRadius(50);
          circle3.setStroke(Color.BLACK);
          circle3.setStrokeWidth(10);
          circle3.setFill(null);
  
          Circle circle4 = new Circle();
          circle4.setCenterX(280);
          circle4.setCenterY(150);
          circle4.setRadius(50);
          circle4.setStroke(Color.GREEN);
          circle4.setStrokeWidth(10);
          circle4.setFill(null);
  
          Circle circle5 = new Circle();
          circle5.setCenterX(340);
          circle5.setCenterY(100);
          circle5.setRadius(50);
          circle5.setStroke(Color.RED);
          circle5.setStrokeWidth(10);
          circle5.setFill(null);
  
          //creating the pane that will display the circle
          Pane pane = new Pane();
          pane.getChildren().add(circle1); //each of these adds the various circles to the display of the pane
          pane.getChildren().add(circle2);
          pane.getChildren().add(circle3);
          pane.getChildren().add(circle4);
          pane.getChildren().add(circle5);
  
          Scene scene1 = new Scene(pane, 440, 250); //creates the parameters of the pane
          primaryStage.setTitle("Olympic Rings"); //names the pane
          primaryStage.setScene(scene1); //picks what will go in the pane
          primaryStage.show(); //shows the scene i've created
      }
  }
  </code></pre>