title: MouseDragged event overflows from the container
body: <p>I have program where I want to draw inside an <code>AnchorPane</code> via <code>MouseDragged</code> event. But when I drag the painting overflows outside it's given container. What can cause such a thing? How to specify the boundaries for <code>MouseDragged</code> event?</p>
  
  <p>A picture showing the problem:
  <a href="https://i.stack.imgur.com/viLxm.png" rel="nofollow"><img src="https://i.stack.imgur.com/viLxm.png" alt="enter image description here"></a></p>
  
  <p>The FXML file for GUI:</p>
  
  <pre class="lang-xml prettyprint-override"><code>&lt;GridPane minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="600.0" xmlns="http://javafx.com/javafx/8.0.65" xmlns:fx="http://javafx.com/fxml/1" fx:controller="painterapp.FXMLDocumentController"&gt;
    &lt;columnConstraints&gt;
      &lt;ColumnConstraints hgrow="SOMETIMES" maxWidth="173.0" minWidth="4.0" prefWidth="173.0" /&gt;
      &lt;ColumnConstraints hgrow="SOMETIMES" maxWidth="1.7976931348623157E308" minWidth="10.0" /&gt;
    &lt;/columnConstraints&gt;
    &lt;rowConstraints&gt;
      &lt;RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" /&gt;
    &lt;/rowConstraints&gt;
     &lt;children&gt;
        &lt;VBox spacing="8.0"&gt;
           &lt;padding&gt;
              &lt;Insets bottom="8.0" left="8.0" right="8.0" top="8.0" /&gt;
           &lt;/padding&gt;
           &lt;children&gt;
              &lt;TitledPane animated="false" text="Choose Color"&gt;
                 &lt;content&gt;
                    &lt;VBox alignment="CENTER" spacing="3.0"&gt;
                       &lt;padding&gt;
                          &lt;Insets bottom="2.0" left="2.0" right="2.0" top="2.0" /&gt;
                       &lt;/padding&gt;
                       &lt;children&gt;
                          &lt;Slider fx:id="redSlider" max="255.0" /&gt;
                          &lt;Slider fx:id="greenSlider" max="255.0" /&gt;
                          &lt;Slider fx:id="blueSlider" max="255.0" /&gt;
                          &lt;Slider fx:id="alphaSlider" max="1.0" /&gt;
                          &lt;Rectangle fx:id="colorRectangle" arcHeight="5.0" arcWidth="5.0" fill="DODGERBLUE" height="108.0" stroke="BLACK" strokeType="INSIDE" width="105.0" /&gt;
                       &lt;/children&gt;
                    &lt;/VBox&gt;
                 &lt;/content&gt;
              &lt;/TitledPane&gt;
              &lt;TitledPane animated="false" text="Choose Size"&gt;
                 &lt;content&gt;
                    &lt;VBox spacing="3.0"&gt;
                       &lt;padding&gt;
                          &lt;Insets bottom="2.0" left="2.0" right="2.0" top="2.0" /&gt;
                       &lt;/padding&gt;
                       &lt;children&gt;
                          &lt;RadioButton fx:id="smallRadioButton" mnemonicParsing="false" selected="true" text="Small"&gt;
                             &lt;toggleGroup&gt;
                                &lt;ToggleGroup fx:id="sizeToggleGroup" /&gt;
                             &lt;/toggleGroup&gt;
                          &lt;/RadioButton&gt;
                          &lt;RadioButton fx:id="mediumRadioButton" mnemonicParsing="false" text="Medium" toggleGroup="$sizeToggleGroup" /&gt;
                          &lt;RadioButton fx:id="largeRadioButton" mnemonicParsing="false" text="Large" toggleGroup="$sizeToggleGroup" /&gt;
                       &lt;/children&gt;
                    &lt;/VBox&gt;
                 &lt;/content&gt;
              &lt;/TitledPane&gt;
              &lt;Button fx:id="UndoButton" maxWidth="1.7976931348623157E308" mnemonicParsing="false" onAction="#undoButtonPressed" text="Undo" /&gt;
              &lt;Button fx:id="clearButton" maxWidth="1.7976931348623157E308" mnemonicParsing="false" onAction="#clearButtonPressed" text="clear" /&gt;
           &lt;/children&gt;
        &lt;/VBox&gt;
        &lt;AnchorPane fx:id="drawingPane" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" onMouseDragged="#drawingPaneMouseDragged" prefHeight="390.0" prefWidth="387.0" style="-fx-background-color: grey;" GridPane.columnIndex="1"&gt;
           &lt;GridPane.margin&gt;
              &lt;Insets bottom="5.0" left="5.0" right="5.0" top="5.0" /&gt;
           &lt;/GridPane.margin&gt;
        &lt;/AnchorPane&gt;
     &lt;/children&gt;
  &lt;/GridPane&gt;
  </code></pre>
  
  <p>The <code>MouseDrag</code> event handling code is below: </p>
  
  <pre><code>@FXML
  private void drawingPaneMouseDragged(MouseEvent e){
      //pick values from Sliders and set the color
      brushColor = Color.rgb((int) redSlider.getValue(), (int) greenSlider.getValue(),
              (int) blueSlider.getValue(), alphaSlider.getValue());
      //pick value of radioButton specified for size
      radius = (PenSize) sizeToggleGroup.getSelectedToggle().getUserData();
      //create a circle
      Circle newCircle = new Circle(e.getX(), e.getY(),radius.getRadius(),brushColor);
      //add circle to the pane
      drawingPane.getChildren().add(newCircle);
  }
  </code></pre>