I am playing with the Raphael SVG library and I defined a element holding the Raphael canvas

<div id="canvas_container"></div>

and I placed the Raphael canvas/paper inside it :

paper = new Raphael(document.getElementById('canvas_container'), '100%', '100%');

Now I would like to get the absolute width/height of the canvas. I figured out how to access the canvas with paper.canvas but if I try to get the paper.canvas.width I get a SVGAnimatedLength element and not the width.

I noticed when using the Chrome dev-tools and selecting the paper.canvas in the console with the mouse, the proper absolute size appears in the window by the selected element (the blue selection appearing in the page when some element selected in the Chrome dev console). But how to get it in the code ?

I am playing with the Raphael SVG library and I defined a element holding the Raphael canvas

<div id="canvas_container"></div>

and I placed the Raphael canvas/paper inside it :

paper = new Raphael(document.getElementById('canvas_container'), '100%', '100%');

Now I would like to get the absolute width/height of the canvas. I figured out how to access the canvas with paper.canvas but if I try to get the paper.canvas.width I get a SVGAnimatedLength element and not the width.

I noticed when using the Chrome dev-tools and selecting the paper.canvas in the console with the mouse, the proper absolute size appears in the window by the selected element (the blue selection appearing in the page when some element selected in the Chrome dev console). But how to get it in the code ?

• javascript
• canvas
• size
• width
• raphael

2 Answers 2

You can use the offsetWidth and offsetHeight values of the canvas object in order to determine the true dimensions of the Raphael canvas.

Example: http://jsfiddle/g54PR/1/

The properties paper.width and paper.hight will help you.