画布上的JavaScript颜色检测w/getImageData

我在使用getImageData函数时遇到问题。我正在尝试制作一个程序，当你点击红色时，它会检测并弹出一个警告框。我已经编写了一个名为"碰撞测试"的碰撞检测函数，虽然我找不到任何问题，但它不起作用。我已经包含了下面的整个代码，将其分为几个部分以便于阅读。

(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);
}

当我用"0"替换collestTest（）中的"255"时，它会一次又一次地弹出警报，所以它没有/完全/坏掉。我只是不确定发生了什么事。

谢谢你的帮助！！