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.

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.

• javascript
• canvas
• raphael

3 Answers 3

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.

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.

A little bit late on this one but I'll post here for other people searching.

    var h = $('container').height(); //get the container height into variable h       
    var w = $('container').width(); //get the container width into variable w
    //set your Raphael canvas to the variables
    var contpaper = Raphael("container", w, h); 
    var doit;
    //function to reload the page and/or do other adjustments
    function resizedw(){   
        document.location.reload()                
    }
    //call function 200 ms after resize is complete.
    $(window).resize(function(){clearTimeout(doit); 
        doit = setTimeout(function() {
        resizedw();
    }, 200)});

This solution is cross browser and mobile safe so you can use this to incorporate responsive design. By adding caveats for viewport width or height to your javascript in the form of if statements, you can define all of your shapes based on the same variables.