title: How to change the color of objects on hover in Javascript?
body: <p>I'm fairly new to Javascript/Canvas and I wanted to create an animation that creates circles whenever I click within the canvas, then it changes colors when I hover over them and reverts back to the original color when the mouse is not hovering over them. I was able to create the animation of drawing circles on click, but can't get the hover color to work. I'm trying to get this done completely with Javascript, using HTML only for creating the canvas. Any advice is appreciate!</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>    let dots = [];
  
      /** @type {HTMLCanvasElement} */
      let canvas = ( /** @type {HTMLCanvasElement} */ document.getElementById("canvas"));
      let context = canvas.getContext('2d');
  
      //some state
      let mouseX = -10;
      let mouseY = -10;
  
      //remember mouse click position
      canvas.onclick = function (event) {
          mouseX = event.clientX;
          mouseY = event.clientY;
  
          let box = (event.target).getBoundingClientRect();
          mouseX -= box.left;
          mouseY -= box.top;
      };
  
      canvas.onmouseleave = function () {
          mouseX = -10;
          mouseY = -10;
      };
  
      var drawCirc = function (hover) {
          //clear the canvas
          context.clearRect(0, 0, canvas.width, canvas.height);
  
          //determine mouse location when outside
          //if inwide canvas, make a dot
          if ((mouseX &gt; 0) &amp;&amp; (mouseY &gt; 0)) {
              dots.push({
                  "x": mouseX,
                  "y": mouseY
              });
          }
  
          //draw circles/dots
          dots.forEach(function (d) {
              context.fillStyle = "#808080";
              context.beginPath();
              context.arc(d.x - 3, d.y - 3, 10, 0, 2 * Math.PI);
              context.fill();
          });
          window.requestAnimationFrame(drawCirc);
      }
      drawCirc();</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>canvas{
    border:1px solid black
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;canvas id="canvas" width="200" height="200"&gt;&lt;/canvas&gt;</code></pre>
  </div>
  </div>
  </p>