Alex Rivera | Logout

Raphael canvas filling a container div

Asked 2010-11-15T10:26:12.820
21

Instead of specifying the width and height of a Raphael canvas, I need it to be 100% the size of its container. So I could just do a Raphael("container", containerElement.width, containerElement.height) and set the onresize function to reset those values. But then the content gets very jumpy and hectic as I resize the window or container because the scrollbars (which I want if it gets too small) flash in and out of existence.

Is this the proper way to bind Raphael's canvas to the full size of a container? I'd also like to provide the option to make the Raphael canvas "full screen" taking up the entire browser window.

Edit
Report

1 Answer

2

Raphael("container", "100%", "100%"); will fill the canvas to width/height of the DIV container. This works fine in Chrome and Safari. To get Firefox on board you'll need to give body and html 100% width/height in the css, otherwise the vector will be clipped.

answered 2012-02-14T05:57:17.240

Your Answer