Adding Click Event Handler onto Multiple Canvas

Question

I am fairly new to javascript and HTML5, so excuse me if it turns out to be a silly mistake

I am drawing 3 canvas programmatically with some text and a rectangle and i want a click event on each one of them, also I need to know which canvas has been clicked, i wrote the following code but doMouseDown function is executed even without click

<canvas id="myCanvas1" width="452" height="80" style="border:0px solid #d3d3d3;"></canvas>
<canvas id="myCanvas2" width="452" height="80" style="border:0px solid #d3d3d3;"></canvas>
<canvas id="myCanvas3" width="452" height="80" style="border:0px solid #d3d3d3;"></canvas>

       <script>
        function init()
        {
            var rect = { w: 300, h: 60 };
            var point = { x: 150, y: 10 };

            for (var i = 1 ; i < 4 ; i++) {
                var canvasStr = "myCanvas" + Number(i);
                var c = document.getElementById(canvasStr);
                var context = c.getContext("2d");

                // text
                context.font = "22pt Arial";
                context.lineWidth = 2;
                context.fillStyle = "#000000";

                var studentStr = "Student " + Number(i);
                context.fillText(studentStr, 5, 50);

                // rectangle
                context.strokeStyle = "black";
                context.strokeRect(point.x, point.y, rect.w, rect.h);

                context.fillStyle = "#00FF00";
                context.fillRect(point.x, point.y, rect.w, rect.h);
                c.addEventListener('mousedown', doMouseDown(canvasStr), false);
            }
        }

        function doMouseDown(canvasStr)
        {
            alert(canvasStr);
        }

        init();
    </script>

How can i fix it and know which canvas has been clicked (canvasStr in this case)

Pankaj · Accepted Answer · 2014-07-31 15:34:44Z

1

You can do it this way

c.addEventListener("mousedown", function () {
                    doMouseDown(canvasStr)
                }, false);

and then write in that function

 function doMouseDown(canvasStr) {
             alert(canvasStr);
          }

answered Jul 31, 2014 at 15:34

Pankaj

2,7803 gold badges27 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Armen Asriyan · Accepted Answer · 2014-07-31 15:44:30Z

1

if you're attaching listeners in a loop, you have to create a closure, otherwise canvasStr will allways be == myCanvas3:

(function(str) {
    c.addEventListener('mousedown', doMouseDown.bind(str), false);
}(canvasStr));

Then your callback should be:

function doMouseDown(e, canvasStr) {
    alert(canvasStr);
}

First argument e is the Event object which is always passed to callbacks.

ADDED There is no point in doing this:

var canvasStr = "myCanvas" + Number(i);

i is already a number and you are adding it to a string. Just write:

var canvasStr = "myCanvas" + i;

answered Jul 31, 2014 at 15:44

Armen Asriyan

1777 bronze badges

Comments

markE · Accepted Answer · 2014-08-01 04:49:18Z

1

Another way is to wrap all 3 canvases in a container div and listen for events on the container

http://jsfiddle.net/m1erickson/g7fsS/

<div id="container">
    <canvas id="myCanvas1" width="45" height="80"></canvas>
    <canvas id="myCanvas2" width="45" height="80"></canvas>
    <canvas id="myCanvas3" width="45" height="80"></canvas>
</div>           


document.getElementById("container").addEventListener("click",function(e){
    console.log(e.target.id);
},false);

answered Aug 1, 2014 at 4:49

markE

106k11 gold badges174 silver badges184 bronze badges

Collectives™ on Stack Overflow

Adding Click Event Handler onto Multiple Canvas

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related