raphael js & canvas RWD testing
HTML
<div id="holder"></div>
<br>
<br>
<canvas id="tutoriel" width="750" height="300" >
Tutoriel canvas
</canvas>
CSS
svg {
height: 100%;
width: 100%;
}
canvas {
/*border: 1px solid black;*/
width: 100%;
}
JavaScript
// RAPHAEL
///* http://raphaeljs.com/reference.html#Raphael */
var paper = Raphael("holder");
paper.setViewBox(0, 0, 1000, 500, true);
// http://stackoverflow.com/questions/11176396/how-can-i-scale-raphael-js-elements-on-window-resize-using-jquery
// none, xMidYMid slice, xMidYMid meet
paper.canvas.setAttribute('preserveAspectRatio', 'xMidYMid meet');
for (i = 0; i < 500; i = i + 30) {
var line = paper.path("m" + i + ",10 l0,300");
line.attr("stroke", "#bbb");
line.attr("stroke-width", "1");
}
for (j = 10; j < 320; j = j + 30) {
var line = paper.path("m0," + j + " l480,0");
line.attr("stroke", "#bbb");
line.attr("stroke-width", "1");
}