I am using the HTML5 canvas element and an image object that I move around the canvas using the arrow buttons. I would like to be able to move the image around until it reaches the top, bottom, or sides of the canvas element. I know that I need to get the position of the x, y positions of the element. I'm just not sure about the logic to compare the elements location to the sides or top or bottom of the canvas. Furthermore, not sure how i would disable to arrow button to prevent me from arrowing the object outside of the canvas.

I'm testing in IE

My canvas width is 512 and canvas height is 480
The object I'm moving around is an image.png that is 32 X 32

I know this isn't much to go on, but I'm having difficulty coming up with how to ask the question.