title: Select and Move Canvas image with MouseEvent and MouseClicked in JavaFX
body: <p>I have this example of an application that draws pictures with <code>GraphicsContext</code> and works as shown in the pictures below.</p>
  
  <p>And the question is to <strong>select</strong> and <strong>move</strong> only the <code>blue circle</code> horizontally with <code>Canvas</code> <code>MouseEvent</code> and <code>MouseClicked</code></p>
  
  <pre><code>public class JavaFXTest extends Application {
  
      @Override
      public void start(Stage primaryStage) {
          Group root = new Group();
          Canvas canvas = new Canvas(300,100);
          GraphicsContext gc = canvas.getGraphicsContext2D();
  
          Stop[] stops;
          LinearGradient gradient;
  
          // outer circle
          stops = new Stop[]{new Stop(0, Color.LIGHTSKYBLUE), new Stop(1, Color.BLUE)};
          gradient = new LinearGradient(0.5, 0, 0.5, 1, true, CycleMethod.NO_CYCLE, stops);
          gc.setFill(gradient);
          gc.fillOval(10, 14, 40, 40);
          gc.fill();
          gc.stroke();
  
          // Inner circle
          stops = new Stop[]{new Stop(0, Color.BLUE), new Stop(1, Color.LIGHTSKYBLUE)};
          gradient = new LinearGradient(0, 0, 1, 1, true, CycleMethod.NO_CYCLE, stops);
          gc.setFill(gradient);
          gc.fillOval(13, 17, 34, 34);
          gc.fill();
          gc.stroke();
  
          root.getChildren().add(canvas);
          Scene scene = new Scene(root);
          primaryStage.setScene(scene);
          primaryStage.show();
      }
  
      public static void main(String[] args) {
          launch(args);
      }
  }
  </code></pre>
  
  <p>And that's the result:</p>
  
  <p><a href="https://i.stack.imgur.com/DNkEb.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/DNkEb.png" alt="enter image description here"></a></p>
  
  <p>It is possible to select the <code>blue circle</code> in <code>canvas</code> with <code>canvas.setOnMouseClicked</code> and move in <strong>horizontal</strong> with <code>canvas.setOnMouseMoved</code>, without know the <strong>position</strong> of <code>blue circle</code>? –</p>
  
  <pre><code>canvas.setOnMouseMoved((MouseEvent e) -&gt; {
  });
  
  canvas.setOnMouseClicked((MouseEvent e) -&gt; {
  });
  </code></pre>