CODEWITHSUNDEEP
javascriptsvgraphael
Eugeny89
Eugeny89

Reputation: 3731

Raphael.js and height of document

I create a canvas with

var paper = Raphael(domid);
...
paper.height = 600;
paper.width = 600;

After I draw path, a part of it is invisible (as it's beyond the edge of canvas). But if I do

var paper = Raphael(domid, 600, 600);

Everything is OK. What is the essential difference between second and first pieces of code?

Upvotes: 0

Views: 95

Answers (2)

gthmb
gthmb

Reputation: 808

Rapheal doesn't have setters for width and height on the Paper object, so calling them is not affecting the DOM, but just setting some properties on the Paper object.

Passing in the width and height params in the constructor will affect the SVG tag in the DOM.

If you want to change the paper's width and height after constrcution, you can set the style properties of the SVG tag like so:

var paper = Raphael(domid);
paper.canvas.style.width = '200px';
paper.canvas.style.height = '100px';

As Kevin mentioned, it's probably better to use the setSize method to handle runtime resizing.

eg)

paper.setSize(200,100)

Hope that helps.

Upvotes: 2

Eugeny89
Eugeny89

Reputation: 3731

There's possible another solution: var paper = Raphael(domid, '100%', '100%');.

Upvotes: 0

Related Questions