1

I am failing at getting a DOM Image onclick event to work. 

var context = document.getElementById('canvas').getContext('2d');

var image = new Image();
image.src = "foo.png"
image.onclick = function(e) { console.log("clicked"); }


setInterval(function() {

context.drawImage(image, 100, 100, 50, 50);    

};

Why do I not get the log message when i click on the image. In developer tools i can see the onclick function is not null for the image.

user2155429
  • 71
  • 1
  • 1
  • 4
  • How exactly are you clicking on this image, you didn't even add it to the document. – Musa Mar 11 '13 at 04:37

4 Answers4

2

Yes, what Musa said...and a few other things.

Some changes to your code

  • Image.src=”foo.png” should come after the image.onclick function
  • Context.drawImage should be inside the image.onclick function
  • setInterval is not needed as far as I can see

Try this: 

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

<style>
    body{ background-color: ivory; }
    canvas{border:1px solid red;}
</style>

<script>
$(function(){

    var context=document.getElementById("canvas").getContext("2d");

    var image=new Image();
    image.onload=function(){
       context.drawImage(image,0,0);
    }
    image.src="http://i.imgur.com/nJiIJIJ.png";

    document.getElementById("canvas").addEventListener("click", function(){console.log("clicked");}, false);


}); // end $(function(){});
</script>

</head>

<body>
    <canvas id="canvas" width=300 height=300></canvas>
</body>
</html>
markE
  • 102,905
  • 11
  • 164
  • 176
1

You cannot set onclick for a particular image added in canvas . You can set onclick for the whole canvas alone so you have to use any third party js or else you should do some calculations which finds that you clicked on the image of the canvas ..

Prasath K
  • 4,950
  • 7
  • 23
  • 35
  • I don't think this is correct, again, I may be wrong, do you have any links that support your answer? – painotpi Mar 11 '13 at 05:08
  • http://stackoverflow.com/questions/11172087/canvas-images-and-click-event .. Have a LOOK on this – Prasath K Mar 11 '13 at 05:15
  • I believe this is the best answer. My example above is setup that way because i an rendering animation on the canvas and wanted to use an image as a button. I really think is is dirty to have to use the canvas click function to determine if the bounds of the image was clicked, but so be it. – user2155429 Mar 11 '13 at 05:50
  • Then draw the image for the whole canvas height and width then set the click event for the canvas so that you will get the image as button.. – Prasath K Mar 11 '13 at 05:59
1

Other users are right.

The image you draw on the canvas is a DOM element but it is rendered in a position which is not stored in the DOM.

This doesn't mean you can access it's position and compare it with the mouse position.

I'm using an external library here, but it does what you need: http://jsfiddle.net/Saturnix/cygUH/

this is the library used.

Since I can't post link to jsfiddles without posting the code, here's the script I've wrote for you.

function demo(g) {
    g.ctx.font = "bold 16px Arial";

    g.draw = function () {
        g.ctx.clearRect(0, 0, g.width, g.height)

        var posX = 0;
        var posY = 0;
        g.ctx.drawImage(image, posX, posY);

        if (g.mouseX > posX && g.mouseX < image.width &&
            g.mouseY > posY && g.mouseY < image.height &&
            g.mousePressed)
        g.ctx.fillText("You're clicking the image!", g.mouseX, g.mouseY);

    }
}
Saturnix
  • 10,130
  • 17
  • 64
  • 120
1

You can cast a ray (with an onclick on the canvas) into the canvas and manually test your images for intersection with the ray. You should write a

objectsUnderPoint( x, y );

function that returns an array of all the images that intersect with the ray at x, y.

This is the way it is usually done in 3D engines as well. You ofcourse need to keep the image position as a property of the image for intersection testing.

David
  • 1,227
  • 12
  • 23