Mouse hover lienzo / forma
Tengo este código en Jquery. Me gustaría cambiar el porcentaje de opacidad de las formas individuales en el mouseover. Normalmente no tengo este tipo de problemas, pero no sé mucho sobre lienzo ...
Cualquier ayuda / consejo sería apreciada! ¡Gracias por adelantado!
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();
}