I'm building a little game in HTML5. The canvas element is a viewport into the game world. The user can move the viewport's position in the world by clicking and dragging with the mouse on a small icon.

The problem is that the scrolling stops when the mouse pointer hits the edge of the screen. In all likelihood, that will limit scrolling in one of the directions severely, since the icon will be in one of the corners of the page.

The only technical solution I can think of would be to somehow fix the mouse pointer's position on the icon and detect the relative movement each frame. Basically I would just reset the pointer position back to the center of the icon after each drag event. Unfortunately, I'm fairly positive that this is not possible. Playing with the user's pointer is a big no-no from a usability and security standpoint.

So, is there any other way to do what I want? I'm primarily looking for technical ideas here, but suggestions for a more appropriate interface would also be welcome.