Chapter 8: Resizing

by Stéphane Cabaret

HTML

<div id="canvas"></div>

CSS

#canvas {
    width: 100%;
}

JavaScript

var paper = Raphael("canvas", 200, 200);

for (var c = 0; c < 20; c += 1) {
    paper.rect(c * 10, c * 10, 10, 10).attr("fill", "hsl(" + Math.random() + ",0.5,0.5)");    
}

paper.setViewBox(0, 0, 200, 200);

function resize() {
    var w = document.getElementById("canvas").offsetWidth;
    console.log(w);
    paper.setSize(w, 200);    
    //paper.setViewBox(0, 0, 200, 200);

}

window.onresize = function() {
    resize();
}

resize();