Question

I create image in this way:

var orc = new Image();
        orc.src = "./orc.png";

I use image in objects like this:

function Character(hp, image){
    this.hp = hp;
    this.image = image;
};

I call it in several times, like:

unit245 = new Character(100, orc);

And I draw it in this way, for example:

ctx.drawImage(unit245.image, 15, 55, 100, 100);

How I can get mouse click or move above my unit245 on canvas?

I need something like this http://easeljs.com/examples/dragAndDrop.html but without any frameworks (except jquery)

Answer 1

function Item(img, x, y){
    this.image = img;
    this.x = x;
    this.y = y;
    this.canv = document.createElement("canvas");
    this.canv.width = this.image.width;
    this.canv.height = this.image.height;
    this.ctx = this.canv.getContext('2d');
    this.ctx.drawImage(this.image, 0, 0, CELL_SIZE, CELL_SIZE);     
    this.hit = function  (mx, my) {
        var clr;
        clr = this.ctx.getImageData(mx - this.x, my - this.y, 1, 1).data;
        if (clr[3] > 250) {
            //On object
            this.image = gold_glow;
        } else {
            //Leave object
            this.image = gold;
        }  
    };
}