section_logo

HTML5 Canvas autoresize

10-07-2011 at 20:20:27 | 2 comments

While developing the HTML5 DICOM Viewer I got some problems while designing the UI in HTML.

One of those problems was how to manage the canvas resize according to the browser size.

At least for me it wasn't so much trivial :) so I decided to post it so it could be useful for someone else.

Basically what you have to do is to bind the onresize event to your body, once you catch the event you just need to resize the canvas using window.innerWidth and window.innerHeight.

I just needed to add little functionality to preserve aspect ratio and manage the toolbar div.

If you want to try it just click here or check the following video to see how it works:

10-07-2011 at 20:20:27 | 2 comments

2 comments


#1 posted by Mr.doob at 2011-07-10 14:09:52

http://slides.html5rocks.com/#css-background ^^

#2 posted by pbauer at 2011-07-19 00:35:27

What Mr.doob said + fallback to javascript resizing w/o the canvas element for all the browsers w/o html5 / css3 support.

Message posting is currently unavailable :(
Feel free to contact me using mail or contact form