1

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 ?

Vadim Kotov
  • 8,084
  • 8
  • 48
  • 62
karlitos
  • 1,604
  • 3
  • 27
  • 59

2 Answers2

6

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.net/g54PR/1/

amustill
  • 5,274
  • 23
  • 15
  • Thank you very much for your answer, but it does not answer my question. Although it is nice to know this. But what if I decide to make new Raphael(document.getElementById('canvas_container'), '90%', '50%'); ? This is why I would like to get the size of the canvas and not of the container. – karlitos Mar 04 '13 at 17:23
  • I see. Your example wasn't very clear in that respect, as you were using `100%` as your example values. I have now updated my answer. – amustill Mar 04 '13 at 18:01
  • Thanks! You made my day, that was what I was looking for. I know the reference to the paper-variable so the paper.canvas.offsetWidth seems to be a good solution to get those measures. – karlitos Mar 04 '13 at 19:16
  • 1
    Your example does not seem to work anymore. Is there any other way to retrieve the current width and height of the Raphael Canvas? I can't find anything in the Raphael reference. – fritzmg Dec 11 '13 at 11:32
  • 1
    +1 One thing to be aware of is, this only works if the element is visible. For example if you generate your Raphael inside a hidden container then show it later, while it is hidden this returns 0 – user56reinstatemonica8 May 06 '15 at 15:23
1

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

Al Foиce ѫ
  • 4,195
  • 12
  • 39
  • 49
Karen Fisher
  • 747
  • 1
  • 8
  • 25