Mouse hover canvas/shape

Question

I have this code on in Jquery. I would like to change the opacity percentage of the individual shapes on mouseover. I normaly don't have this kind of problems, but I don't know a lot about canvas...

Any help/advice would be appreciate! Thanks in advance!

var canvas = document.getElementById('canvas');
    if (canvas.getContext) {
        var ctx = canvas.getContext('2d');
        ctx.canvas.addEventListener('mousemove', function(event){
        var mouseX = event.clientX;
        var mouseY = event.clientY;
        var status = document.getElementById('status');
            status.innerHTML = mouseX + " | " + mouseY;
        });
        ctx.beginPath();
        ctx.moveTo(67, 254);
        ctx.lineTo(57, 180);
        ctx.lineTo(87, 92);
        ctx.lineTo(158, 116);
        ctx.lineTo(193, 168);
        ctx.lineTo(196, 244);
        ctx.lineTo(135, 302);
        ctx.lineTo(67, 254);
        ctx.fillStyle = 'rgba(255, 240, 0, 0.5)';
        ctx.fill();
        ctx.closePath();

        ctx.beginPath();
        ctx.moveTo(211, 156);
        ctx.lineTo(209, 96);
        ctx.lineTo(226, 37);
        ctx.lineTo(292, 49);
        ctx.lineTo(307, 92);
        ctx.lineTo(305, 154);
        ctx.lineTo(286, 168);
        ctx.lineTo(258, 157);
        ctx.lineTo(254, 171);
        ctx.lineTo(211, 156);
        ctx.fillStyle = 'rgba(255, 240, 0, 0.5)';
        ctx.fill();
        ctx.closePath();


        ctx.beginPath();
        ctx.moveTo(230, 368);
        ctx.lineTo(228, 274);
        ctx.lineTo(259, 154);
        ctx.lineTo(396, 202);
        ctx.lineTo(406, 258);
        ctx.lineTo(398, 352);
        ctx.lineTo(357, 456);
        ctx.lineTo(230, 368);
        ctx.fillStyle = 'rgba(255, 240, 0, 0.5)';
        ctx.fill();
        ctx.closePath();

        ctx.beginPath();
        ctx.moveTo(338, 183);
        ctx.lineTo(340, 132);
        ctx.lineTo(357, 62);
        ctx.lineTo(453, 80);
        ctx.lineTo(455, 132);
        ctx.lineTo(449, 196);
        ctx.lineTo(428, 240);
        ctx.lineTo(400, 228);
        ctx.lineTo(395, 202);
        ctx.lineTo(338, 183);
        ctx.fillStyle = 'rgba(255, 240, 0, 0.5)';
        ctx.fill();
        ctx.closePath();

}

My project JsFiddle

Answer 1

Use context.isPointInPath to hit test if the mouse is inside one of your paths.

Here's a quick example:

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;
function reOffset(){
    var BB=canvas.getBoundingClientRect();
    offsetX=BB.left;
    offsetY=BB.top;        
}
var offsetX,offsetY;
reOffset();
window.onscroll=function(e){ reOffset(); }
window.onresize=function(e){ reOffset(); }

ctx.fillStyle='blue';

var shapes=[];
shapes.push(
    [{x:67,y:254},{x:57,y:180},
        {x:87,y:92},{x:158,y:116},
        {x:193,y:168},{x:196,y:244},
        {x:135,y:302},{x:67,y:204}]
);

ctx.globalAlpha=0.25;
for(var i=0;i<shapes.length;i++){
    defineshape(shapes[i]);
    ctx.fill();
}
ctx.globalAlpha=1.00;

$("#canvas").mousemove(function(e){handleMouseMove(e);});

function defineshape(s){
    ctx.beginPath();
    ctx.moveTo(s[0].x,s[0].y);
    for(var i=1;i<s.length;i++){
        ctx.lineTo(s[i].x,s[i].y);
    }
    ctx.closePath();
}

function handleMouseMove(e){
  // tell the browser we're handling this event
  e.preventDefault();
  e.stopPropagation();
  // mouse position
  mouseX=parseInt(e.clientX-offsetX);
  mouseY=parseInt(e.clientY-offsetY);
  // test if mouse is inside any shape(s)
  // and redraw different alpha based on hovering
  ctx.clearRect(0,0,cw,ch);
  for(var i=0;i<shapes.length;i++){
      defineshape(shapes[i]);
      if(ctx.isPointInPath(mouseX,mouseY)){
          ctx.globalAlpha=1.00;
      }else{
          ctx.globalAlpha=0.25;
      }
      ctx.fill();
  }
}

body{ background-color: ivory; }
#canvas{border:1px solid red; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<h4>Hover over shape with mouse.</h4>
<canvas id="canvas" width=300 height=350></canvas>