HTML5 Canvas Mouse

Question

Something like I am have:

function mouseClick(event) {
        ...
    }
    canvas.addEventListener("mousedown", mouseClick, false);
    function drawRect(x, y) {
        context.fillRect(x, y, 16, 16);
    };
    drawRect(10, 10);

How to do something like if I am click on my Rect in Canvas get something? something like If I am click on Rect get alert;

Sorry for my English language.

Answer 1

A canvas is nothing more than a bitmap. There is no record kept that there was a rectangle drawn on the canvas, so if you want to detect that the click was inside an area that you drew a rectangle on, you have to keep a record of the areas you've drawn and test against them. eg:

var rects= [];

function mouseClick(event) {
    // Get position of click relative to canvas. This is not reliable! Requires
    // standards mode, and the canvas not being nested in other offsetParents.
    // Getting page-relative co-ordinates reliably in all cases is outside the
    // scope of this question...
    //
    var x= event.clientX-document.documentElement.scrollLeft-canvas.offsetLeft;
    var y= event.clientY-document.documentElement.scrollTop-canvas.offsetTop;

    // Hit-test each rectangle in the list of those drawn
    //
    for (var i= rects.length; i-->0;) {
        var x0= rects[i][0], y0= rects[i][1], x1= rects[i][2], y1= rects[i][3];
        if (x0<=x && x<x1 && y0<=y && y<y1) {
            alert('you clicked on a rectangle!');
        }
    }
}
function drawRect(x, y) {
    rects.push([x, y, x+16, y+16])
    context.fillRect(x, y, 16, 16);
};
drawRect(10, 10);

If you are doing a lot of this sort of thing you are likely to be better off using a retained-mode drawing system like SVG instead of the pure-bitmap Canvas. In SVG you can listen for click events directly on a rectangle object, move the rectangle, re-stack it and so on.

Answer 2

$(canvas).mousedown(function myDown(e) 
{
  var position = $(canvas).position();
  var x = e.pageX-position.left;
  var y = e.pageY-position.top;
  ...
});

This is much better way to do this!

Answer 3

I think what you're saying is that you want events to occur when you click on objects you have drawn on a canvas. I have written a few tutorials on how to make persistent shapes and move them around with mouse clicks. That should give you a good starting point for this.

Answer 4

You could also try out Concrete.js http://www.concretejs.com which is a lightweight canvas framework that adds interactivity. You would just do something like this:

var key = canvas.getIntersection(x,y);

if x,y intersects a graphic you've drawn with a given key, it returns the key, and you know what was hovered/clicked on.

This is a much better solution because it will work on anything you draw, including circles, lines, curves, polygons, arbitrary blobs, etc.

Answer 5

addEventListener is tricky. What I would try is

canvas.addEventListener.apply(canvas, ["mousedown", mouseClick, false]);

or use an anonymous function.

canvas.addEventListener.apply(canvas, ["mousedown", function(){ mouseClick(); }, false]);

Using the apply function can help make sure the eventListener is applied to the right element. You can read about it here .