Indie-Resource.com

I need help getting an HTML5 canvas to do what I want it to

I have my main game screen laid out. There is a 50 pixel header bar and footer bar - both are fixed and remain in place at the top and bottom of the browser window regardless of scrolling/window size. Then on the left hand side of the screen, I have a div which takes up 20% of the screen and fills between the header/footer to display notes, info, etc. The remainder (everything to the right of this panel and between the header and footer) I have designated as a div called "gameDiv". As it is now, I can resize the window all I want and the divs all stay as they should, adding scroll bars if needed, so my layout is working from that respect.

Here's what I want to do next: Within gameDiv I want to create a viewport that displays a portion of a canvas element. The canvas element contains a map image 2000x2000 pixels in size. I want the viewport to resize automatically, always filling the gameDiv section and displaying whatever portion of the underlying canvas that it can in the area available.

I've been looking around Google and so far everything I have found scales the canvas, rather than keeping the canvas the same size and just displaying a different sized viewport of it.

Can I even do what I'm attempting? How would I go about it?

Can't you just give the canvas a CSS width and height of 2000px? Then the gameDiv would act as the viewport.

That actually worked... it gave me scrollbars which I was hoping to avoid. But it's working for now. Maybe I can figure out a more elegant solution later

Thanks!

Overflow: hidden on the gamediv will hide the scrollbars.

Yes, that's true, good point. I was going to do mouse panning/zooming anyway, so I didn't want scrollbars, but wanted to be able to move the map around.

Looks like this might work. Thanks

OK, new problem

Anything I render to my canvas is zoomed way up in size. Like if I draw a 20x20 box, it fills the screen

*edit*

Never mind - I got it.

Apparently you can't specify canvas height/width in a stylesheet, it has to be in the html