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

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

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

Hover over shape with mouse.