JavaScript Color Detection w/ getImageData on Canvas

Question

I'm having trouble with the getImageData function. I'm trying to make a program that detects when you hit the color red and pops up an alert box. I've written a collision detection function called "collideTest", and though I can't find any problems with it, it isn't working. I've included the entire code below, separating it into sections for friendlier reading.

(function () {
    var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
    window.requestAnimationFrame = requestAnimationFrame;
})();

//========================= B E G I N =======================================

window.onload = function init() {

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

    canvas.width = 600;
    canvas.height = 600;

    render();
}

//======================== O B J E C T S =====================================

var player = {
    x: 50,
    y: 50,
    xvel: 0,
    yvel: 0,
}

//===================== I N P U T & A D J U S T ============================

var keys = [];

window.addEventListener("keydown",function(e) {
    keys[e.keyCode] = true;
});

window.addEventListener("keyup",function(e) {
    keys[e.keyCode] = false;
});

function input() {

    if (keys[37]) {
        player.xvel -= 5
    }
    if (keys[39]) {
        player.xvel += 5
    }
    if (keys[38]) {
        player.yvel -= 5
    }
    if (keys[40]) {
        player.yvel += 5
    }

    player.x += player.xvel;
    player.y += player.yvel;

    player.xvel = 0;
    player.yvel = 0;

    collideTest();

}

//======================= C O L L I S I O N ================================

function collideTest(){
    var canvas = document.getElementById("canvas");
    var c = canvas.getContext("2d");
    var whatColor = c.getImageData(player.x - 5, player.y - 5,60,60);
    for (var i = 0; i < whatColor.data.length; i += 4) {
        if (whatColor.data[i] == 255) {
            alert("red");
        }
    }
}

//========================== R E N D E R ===================================

function render(){

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

    canvas.width = 600

    input();

    c.fillStyle = "red"
    c.fillRect(300,300,50,50);

    c.fillStyle = "rgb(106,8,136)"
    c.fillRect(player.x,player.y,50,50)

    requestAnimationFrame(render);
}

When I replace the "255" in collideTest() with "0", it pops up the alert over and over again, so it isn't /entirely/ broken. I'm just not sure what's going on.

Thank you for any help at all!!

Answer 1

Your calculations were correct. Just move your input() call that's inside of the render() function to be between the 2 rectangle creations:

c.fillStyle = "red"
c.fillRect(300,300,50,50);

input()

c.fillStyle = "rgb(106,8,136)"
c.fillRect(player.x,player.y,50,50)

Getting the image data is going to get a snapshot of the whole canvas, so if you were drawing the purple on top of the red every time, it's always going to be the purple at the coordinates you're detecting.

Might I suggest using console.log() to spit out your results instead of alert()? ;)