Question

I have this canvas mousedown event:

$('#canvas').mousedown(function(e) {
    var coords = canvas.getMousePos(e); // user helper function

    if (coords.x >= 0 && coords.x <= 16 && coords.y >= 32 && coords.y <= 48) {
        tool = "fill";
    } else if (coords.x >= 16 && coords.x <= 32 && coords.y >= 32 && coords.y <= 48) {
        tool = "circle";
    }
});

I am also drawing images on this canvas like so in my document ready function:

var imgCircle = new Image();
imgCircle.src = "circle.png";

imgCircle.onload = function() {
    toolboxContext.drawImage(imgCircle, 16, 32);
}

I don’t like using hardcoded values like that in my if statements. I was wondering if there was a way to either get the local coordinates of the images in the canvas or actually register events for the clicking of said images. Thanks for reading.

Answer 1

You can’t register directly events on your objects but it’s easy to register events on the canvas as in

canvas.addEventListener("mousedown", function(e) {

(you’re maybe more interested in “mouseup”)

And then you can get the coordinates in the canvas with

e.pageX-$(canvas).offset().left

and

e.pageY-$(canvas).offset().top

(here using jQuery for easy cross-platform positionning of the canvas but you can use standard javascript)

After that, you just have to compare with the positions of your images that you must keep somewhere. I personnally use for that effect a Rect class :

function Rect(x,y,w,h){
    this.x = x;
    this.y = y;
    this.w = w;
    this.h = h;
}
Rect.prototype.contains = function(x, y) {
    return x>=this.x && x<=this.x+this.w && y>=this.y && y<=this.y+this.h;
};