Raphael canvas filling a container div

javascript canvas raphael
at. picture at. · Nov 15, 2010 · Viewed 15.1k times · Source

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.

Answer

Adam Holmes picture Adam Holmes · Nov 15, 2010

If you are using a div then you could use CSS to set that to 100% of the width and height. You then use the Raphael("container", "100%", "100%")

As for making it full screen, most browsers have a command to do this. So if you really are doing 100% then when you press the command button e.g. (F11 in firefox) it will become FULL screen.

Related questions

Applying rounded corners to paths/polygons

I'm gathering some info for a project that has to start within a few weeks. This project contains a browser-based drawing tool where users can add predefined shapes or forming shapes themselves. Shapes must be selectable, freely scalable and rotatable …

Read More
How to clear the canvas for redrawing

After experimenting with composite operations and drawing images on the canvas I'm now trying to remove images and compositing. How do I do this? I need to clear the canvas for redrawing other images; this can go on for a …

Read More
Capture HTML Canvas as gif/jpg/png/pdf?

Is it possible to capture or print what's displayed in an html canvas as an image or pdf? I'd like to generate an image via canvas, and be able to generate a png from that image.

Read More