Scrollbars around an HTML5 canvas

A quick post on how to get the browser to scroll the stage. The simple solution is to draw the stage full size and place it inside a smaller div.

The key here is that the div that contains the canvas has a specified width & height, and also overflow-scroll.

<div id='stagescroll'>
  <div id="container"></div>
</div>
#stagescroll 
{
  width: 800px;
  height: 600px;
  overflow: scroll;
}

And here is the result.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: