title: Change color of custom shapes on HTML5 canvas using jQuery on mouseover?
body: <p>I have this <a href="https://jsfiddle.net/vehgm1wy/" rel="nofollow">code</a> for a map I am trying to make using HTML5 Canvas and jQuery. I have some of the shapes already made and the color filled in. What I don't know how to do is to make the color of the custom shapes change when the mouse is hovering over them. Any solutions?</p>
  
  <pre><code>&lt;canvas id="canvas" width="700" height="485"&gt;
  &lt;/canvas&gt;
  
  &lt;script&gt;
  $(document).ready(function() {
  
       var tech = canvas.getContext( '2d' );
       tech.beginPath();
       tech.moveTo(250, 280);
       tech.lineTo(240, 280);
       tech.lineTo(240, 315);
       tech.lineTo(277, 315);
       tech.lineTo(277, 287);
       tech.lineTo(250, 287);
       tech.closePath();
       tech.stroke();
       tech.fillStyle = "rgba(0, 0, 255, 0.3)";
       tech.fill();
  
       union = canvas.getContext( '2d' );
       union.beginPath();
       union.moveTo(400, 195);
       union.lineTo(386, 195);
       union.lineTo(386, 198);
       union.lineTo(364, 198);
       union.lineTo(364, 215);
       union.lineTo(386, 215);
       union.lineTo(386, 207);
       union.lineTo(400, 207);
       union.closePath();
       union.stroke();
       union.fillStyle = "rgba(0, 0, 255, 0.3)";
       union.fill();
  
       cntr = canvas.getContext( '2d' );
       cntr.beginPath();
       cntr.moveTo(340, 196);
       cntr.lineTo(320, 196);
       cntr.lineTo(320, 222);
       cntr.lineTo(340, 222);
       cntr.closePath();
       cntr.stroke();
       cntr.fillStyle = "rgba(0, 0, 255, 0.3)";
       cntr.fill();
  
       picho = canvas.getContext( '2d' );
       picho.beginPath();
       picho.moveTo(300, 240);
       picho.lineTo(285, 240);
       picho.lineTo(285, 250);
       picho.lineTo(300, 250);
       picho.closePath();
       picho.stroke();
       picho.fillStyle = "rgba(0, 0, 255, 0.3)";
       picho.fill();
  });
      &lt;/script&gt;
  </code></pre>