Haz clic en la región del lienzo para cambiar la imagen.

Por favor, ayúdame:

crear regiones en las que se puede hacer clic en el lienzo a continuación al que puedo asignar onmousedown = events. Sé cómo hacerlo con DIV invisibles, pero creo que hay una forma más elegante de hacerlo en lienzo que no conozco.

cuando hago clic en una de las regiones, deseo pasar el nombre de una imagen a una función para que cambie la imagen que se muestra a otra imagen y luego la vuelva a cambiar en la cuenta de usuario.

Si me muestra solo una región y un ejemplo de ratón / ratón, puedo hacer el resto ... gracias.

<!DOCTYPE HTML>
<html>
<head>
</head>
<body>

        <canvas id="myCanvas" width="506" height="319" style="border:1px solid #c3c3c3;">
        Your browser does not support the canvas element.
        </canvas>

        <script type="text/javascript">
        var c=document.getElementById("myCanvas");
        var ctx=c.getContext("2d");
        var img=new Image();
        img.onload = function(){
        ctx.drawImage(img,0,0);
        };
        img.src="firstImage.gif";
        </script>

        /////////HERE NEED/////////
                    CREATE CLICKABLE REGION <region>
                    <region>
                    onmousedown=changeCanvasImage(secondImage.gif) //change image on click
                    onmouseup=changeCanvasImage(firstImage.gif)  /change it back when done
        </region>
</body>
</html>

Respuestas a la pregunta(1)

Su respuesta a la pregunta