title: Javascript Canvas Element - Check if circle element was clicked
body: <p>I'm new to using Canvas so I'm having a few issues. I have this little game set up where circles are falling at a consistent rate, but I'm having issues determining if a falling circle was selected.</p>
  
  <p>So basically I need help determining how a moving circle can be selected. Can you add event listeners on the ctx elements?? Also I don't want to use jQuery for this if at all possible.</p>
  
  <p>Thanks for any help!!</p>
  
  <pre><code>var myGamePiece;
  var range = document.getElementById("myRange");
  var rangeValue = document.getElementById("sliderValue");
  var score = document.getElementById("score");
  var canvas = document.getElementById("canvasElement");
  
  var speedValue = 1;
  var counter = 0;
  canvas.width = 480;
  canvas.height = 350;
  
  
  canvas.addEventListener("click", function(){
      counter += 1;
      score.innerHTML = counter;
  });
  
  range.onchange = function(){
      rangeValue.innerHTML = this.value;
      speedValue = this.value;
  };
  
  function startGame() {
      var randomXCord = Math.random() * (450 - 100) + 100;
      var randomSize = Math.random()* (50 - 10) + 10; //random dot size between 100px - 10px
  
      //check to make sure dots will not go off the side of the screen
      if(randomSize &gt;= 30){
          if(randomXCord &gt;= 400){
              randomXCord -= 50;
          }
      }
      myGamePiece = new component(10, 10, "red", randomXCord, 10, randomSize);
      console.log(randomSize);
      console.log(randomXCord);
  
      myGameArea.start();
  };
  
  var myGameArea = {
  
      start : function() {
          document.body.insertBefore(canvas, document.body.childNodes[0]);
          this.context = canvas.getContext("2d");
          var interval = setInterval(updateGameArea, 20);
      },
      clear : function() {
          this.context.clearRect(0, 0, canvas.width, canvas.height);
      }
  };
  
  function component(width, height, color, x, y, size) {
      this.width = width;
      this.height = height;
      this.x = x;
      this.y = y;
      console.log(this.width);
      this.radius = size;
      this.update = function(){
          ctx = myGameArea.context;
          ctx.beginPath();
          ctx.fillStyle = color;
          ctx.arc(this.x, this.y, this.radius, 0, 2 * Math.PI, false);
          ctx.fill();
      };
  };
  
  function updateGameArea() {
      myGameArea.clear();
      //makes the dot go vertically down then calls update
      myGamePiece.y += speedValue;
      //check to see if dot if off the page
      if(myGamePiece.y &gt;= canvas.height){
          myGameArea.clear();
          //  startGame();
          //setTimeout(function() { startGame(); }, 1000);
  
      }
      myGamePiece.update();
  };
  </code></pre>