MouseOver en rectángulos de canvas

[Alexis88]

Si lo necesitas para cada figura, pues toma todos los elementos canvas y aplícales los eventos.

Código HTML:

<section>
    <canvas></canvas>
    <div>UNO</div>
</section>
  
<section>
    <canvas></canvas>
    <div>DOS</div>
</section>
  
<section>
    <canvas></canvas>
    <div>TRES</div>
</section>
 

Código Javascript:

var misCanvas = document.getElementsByTagName("canvas"),
    misDivs = document.getElementsByTagName("div");
 
for (i = 0, limite = misCanvas.length; i < limite; i++) {
    (function(fig){
        //Formamos la figura
        var figura = misCanvas[fig].getContext("2d");
        figura.fillStyle = "#f00";
        figura.fillRect(0, 0, 80, 100);
       
        //Para mostrar el Div
        misCanvas[fig].addEventListener("mouseover", function(){
            misDivs[fig].style.display =  "block";
        }, false);
 
        //Para ocultar el Div
        misCanvas[fig].addEventListener("mouseout", function(){
            misDivs[fig].style.display =  "none";
        }, false); 
    })(i);  
}
 

Básicamente, tomo todos los canvas y Divs del documento y con ayuda de un bucle, voy formando las figuras de los canvas y les aplico los eventos mouseover y mouseout para que se muestre el Div respectivo al posar el puntero del mouse en cada figura. Utilizo una función anónima auto-ejecutable para aplicar correctamente los eventos y creación de figuras a cada canvas.

Aquí puedes ver cómo funciona esto.

Saludos