Looking for script to disable arrow button when object reaches the canvas edges

JavaScript
1

Hello,

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.

Thanks,
Mike

2

I wrote a little example script for bounding a few days ago for your previous post related to a similar thing, take a look at that and you should be able to figure it out quite easily. The principle is the same, but instead of just stopping the box from moving, you’ll also disable a button.

http://jsfiddle.net/9y5B2/ [URL=“http://jsfiddle.net/GeekyJohn/q5MaM/”]