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