How do i get my x and y value to detect a collision between two images in html5 canvas?

Question

I am trying to make two images collide (one is a cannonball called figBola and the other a ballon called figSprite), the problem I have is that I always get a value of 0 in both ax, ay and bx, by when using alert(); in my colliding function when I am supposed to get the position of both images in that moment which equal x and y. Both of my images width and height are returned correctly. This is what I have tried so far (the colision code is at the bottom):

function iniciar(){

    elemento =  document.getElementById("area");
    lienzo = elemento.getContext("2d");
    figSprite = new Image();
    figSprite.src = "ballon.png";
    figBola = new Image();
    figBola.src = "bola.png";
    figCanon = new Image();
    figCanon.src = "cañon.png";

    //mostrar imagen en canvas
    dibujar_sprite(450,20);
    dibujar_bolita(50,20);
    dibujar_canon(0,20);
    incremento=true;

    xcanon = 0;
    ycanon = 20;
    inccanon = 0;
    inccanon1 = 2;
    //variables de posicion
    xs = 450;
    ys = 20;
    incy = 3;
    intervalo = 25; //miliseg, num veces = 1000/25 = 40
    //definicion del intervalo
    repeticion=undefined;
    xbolita = -50;
    ybolita = -20;
    incx=3;
    disparar=true;
    window.addEventListener("keypress", mover, false);
}

function animacion(){
    lienzo.clearRect(0, 0, 500, 500);
    if(incremento===true && ys < 430)
    {
        ys+=incy;
        dibujar_sprite(xs, ys);

        if(ys+incy > 430)
            incremento = false;
    }

    if(incremento===false && ys > 20)
    {
        ys-=incy;
        dibujar_sprite(xs, ys);

        if(ys-incy <= 20)
            incremento = true;
    }

    ycanon+= inccanon;

    if(ycanon < 20 || ycanon > 450)
    {
        inccanon=0;
    }

    xbolita+= incx;
    dibujar_bolita(xbolita, ybolita);
    dibujar_canon(xcanon, ycanon);

    collision(figSprite, figBola);
}

function btnStart_click(){
    repeticion = setInterval(animacion, intervalo);
    document.getElementById("stop").disabled = false;
    document.getElementById("start").disabled = true;
}

function btnStop_click(){
    clearInterval(repeticion);
    document.getElementById("stop").disabled = true;
    document.getElementById("start").disabled = false;
}

function btnUp_click(){
    inccanon = -2; 
}

function btnDown_click(){
    inccanon = +2;
}

function btnShoot_click(){
    xbolita = 20;
    ybolita = ycanon;
}
//draw images
function dibujar_sprite(x,y){
    lienzo.drawImage(figSprite, x, y);
}

function dibujar_bolita(x,y){
    lienzo.drawImage(figBola, x, y);
}

function dibujar_canon(x,y){
    lienzo.drawImage(figCanon, x, y);
}

function mover(e){
    valor = e.keyCode;

    if(valor === 38)
        ycanon -= inccanon1;

    if(valor === 40)
        ycanon += inccanon1;

    inccanon=0;
}

collision code where i am passing images as varibles:

function collision(a, b){
    if(a.x < b.x + b.width && a.x + a.width > b.x && a.y < b.y + b.height && a.y + a.height > b.y)
    {
        alert(a.x);
        alert(a.y);
        alert(b.x);
        alert(b.y);
    }
}

Answer 1

OK, here's your problem: an Image object doesn't have x and y properties, but it does have width and height . Thus, when you try to access the x and y properties in your collision function, they come up as undefined .

It looks like you have the coordinates of each object stored in variables already ( xcanon , ycanon , etc.), so those can be used as additional arguments in your collision function, however, this may not be your best bet. You could also define x and y properties of each Image object, however, I think a bit of refactoring is your best bet here. Try creating a custom JavaScript object for each item you're working with:

function GameItem (image, x, y, width, height) {
    this.image = image;
    this.x = x;
    this.y = y;
    this.width = width;
    this.height = height;
}

var spriteImage = new Image();
spriteImage.src = "ballon.png";
sprite = new GameItem(spriteImage, 450, 20, spriteImage.width, spriteImage.height);

// etc.

// collision method now works between two of these objects:
collision(sprite, bola);

If you use this code, be sure to update your draw-- er... dibujar methods. :)

PS: Sorry, but my Spanish-JavaScript reading skills aren't in their prime.