ScaleRaphaël

ScaleRaphaël is a small piece of javascript code that will enable you to change the size of your Raphaël paper during runtime.

Dependencies

Raphaël

Download

scale.raphael.js

Examples:

Fill the window - no clipping
Fill the window - with clipping
Fill the window - with animation

Usage

ScaleRaphaël wraps the Raphaël constructor. When you create your Raphaël instance with ScaleRaphaël you are restricted to using the container style instantiation like this:

var paper = new ScaleRaphael("container", 800, 600);

To scale the entire paper by a percentage value you can use scaleAll() function.

  // scale everything 200%
  paper.scaleAll(2);

The main purpose of ScaleRaphaël is to scale the paper up to the size of the browser window. To do this you can use the changeSize() function.

paper.changeSize(windowWidth=number, windowHeight=number [,center=true, clipping=false])

The changeSize() function will always maintain the original aspect ratio defined in the constructor. It has optional parameters for centering and clipping.
To scale your paper to the size of the window you need to call changeSize() during the window.onresize event. Using Jquery:

function resizePaper(){
  var win = $(this);
  paper.changeSize(win.width(), win.height(), true, false);
}
resizePaper();
$(window).resize(resizePaper);

If your not using JQuery you can do a cross browser window resize like this:

var windowAddEvent = window.attachEvent || window.addEventListener;
      
function resizePaper(){
   var w = 0, h = 0;
   if (window.innerWidth){
      w = window.innerWidth;
      h = window.innerHeight;
   }else if(document.documentElement &&
           (document.documentElement.clientWidth || 
            document.documentElement.clientHeight)) { 
            w = document.documentElement.clientWidth;
            h = document.documentElement.clientHeight;
   }
   paper.changeSize(w, h, true, false);
}
resizePaper();
windowAddEvent("onresize", resizePaper, false);

Please Note

It's worth noting that ScaleRaphaël maintains the original coordinate system when you call new ScaleRaphael() - so cx,cy etc... attributes don't change when the paper is scaled. It's also worth noting that Raphaël's width and height properties change depending on the scale - for this reason ScaleRaphaël adds two properties (w and h) for the width and the height of your paper that will always match the original values from your call to new ScaleRaphael(). You can access these properties like this:

var paper = new ScaleRaphael("container", 800, 600);
// ... somewhere later
alert([paper.w, paper.h]);
// outputs 800,600

ScaleRaphaël by Zevan Rosser 2010