I am using Raphael JS, and create a canvas with width set at 100% of the container like so...
// there is a `div` with id `paper`
paper = Raphael('paper', '100%', '100%')
paper.circle(50, 40, 100)
Now I want to know how big the canvas is. how can I reliably find out the canvas size on all platforms?
I am not using jQuery.
Update: Potential workaround
Bonus points will be awarded for a solution that makes getting pixel width unnecessary, by making cavas scale proportionally. I am fairly sure this is possible with canvas so assume it is possible with Raphael, so that if I create all elements to a set width (say 100 pixel wide canvas) then I should be able to scale the canvas to 100% of the screen, and the canvas should fill the screen, with all elements stretched appropriately, and keeping their proportions.
You can use the viewbox in order to scale to fit in full screen mode.
http://raphaeljs.com/reference.html#Paper.setViewBox
You define a physical region (x, y, width, height) that contains your svg data, and everything will be scaled up while maintaining the proportions. The viewbox region is upscaled proportionally (when you specify false for fit) to the maximum size it can be inside the container.
paper.setViewBox(0, 0, 100, 100, false);
Unfortunately, Raphael doesn't seem to give you the option of specifying how the overflow is handled. For example, you might wish to centre the view box so that any excess is spread evenly. If you have a 100 x 200 container and you have a 100 x 100 viewbox, then you have 100 pixels in height below the upscaled viewport, when you may wish for the viewport to have 50 pixels above and 50 pixels below.
In SVG these options are defined on the SVG container's preserveAspectRatio property. If you are not supporting the VML (lte ie8) option then you could change this property to affect the alignment.
http://premsobel.info/notes/ml/svg/viewports.html
As for detecting width and height in general, you are better off detecting the width or height of the parent node using element.clientWidth and element.clientHeight. I tend to avoid using body as the parent node and add my own inner container for detecting the size. Your canvas is 100% width/height of some container, so I would go looking for that container to find out what size it is.
Related
I'm buliding a Three.js project.
In JS, I defined that renderer.setSize(1920，600).
With the command renderer.domElement in console I can check the renderer size.
Under the normal browser zoom ratio (100%), the size of canvas is 1920 x 600.
But if I change the zoom ratio to 150% then I got the wrong size 2880 x 900,which width and height are multiplied by 150%.
Generally speaking, if zoom ratio = z, then canvas width=1920z and height=600z .
This is not what I want! I want a fixed size 1920 x 600 ,which is not affected by the browser zoom ratio.
Strange situation ,anyone can solve this problem?
Canvases have 2 sizes.
The size of their drawingBuffer.
This is how many pixels are in the canvas. This is set by the width
and height attributes
<canvas width="123" height="456"></canvas>
Or by setting the width and height properties
someCanvas.width = 123;
someCanvas.height = 456;
The size the canvas is displayed
This is set by CSS
<canvas width="123" height="456" style="width: 789px; height: 987px;"></canvas>
That canvas will have 123x456 pixels displayed at 789x987px
The CSS size can be set to any valid CSS. For example width: 50%; in which case the browser will stretch the canvas to 50% of the size of its container. You can look up the size the browser is displaying the canvas i CSS pixels by looking at canvas.clientWidth and canvas.clientHeight or by calling canvas.getClientBoundingRect().
The browser NEVER changes size #1 above. Size #2 only changes if you set it to some percent measure. If it's changing that's happening in your code somewhere. Check for a resize function
Note that three.js's renderer.setSize sadly sets the CSS for the canvas in JavaScript. If you don't want it to set the CSS pass in false as the last argument as in
renderer.setSize(width, height, false);
This is currently (as of 2015-11-29) undocumented.
I am working with a copy of http://www.rgraph.net/demos/bar04.html in which the canvas has no height and width specified in its attributes, but set in CSS to have height and width of 100%.
At present the rendered image looks like it was graphed crisply at a low resolution and then blown up; the screen has the same sort of fuzziness you'll get from zooming too far in on an image in a browser.
Is there any way to adapt and configure RGraph so the image is crisp when the graph fills a screen?
Changing the size of the canvas with CSS will just scale it rather than change the innate resolution. To change the resolution set the width and height properties of the canvas. You can either do this in the markup, or you can set it in script:
var cvs = document.getElementById('cvs');
cvs.width = 1200;
cvs.height = 500;
As well as hard-coding the values you could determine the window size when the page has loaded (eg with jQuery) and then set the width/height attributes to that.
I am working on HTML5 project and i am getting somne problem.
Actually i have a canvas on which i am drawing image by using
ctx1.scale(0.5,0.5); // let assume
ctx1.drawImage(Image,0,0,canvas.width,canvas.height);
I want to calculate new height width of image after scaling (i.e scale=0.5). So that i could change the canvas height and width fit to image (as boundary).
Thanks in Advance
It is just as simple as multiplying the width by the scale!
Not sure about syntax though:
canvas.width * scale
I am able to generate the raphael diagram , but it is exceeding the specified width and height of the Raphael canvas.
How can i add a scroll-bar to the Raphael canvas to accommodate the entire diagram within the given width and height of the Raphael canvas?
Are there any other ways or workarounds to handle the above case?
Please help. Thanks in Advance.
I was running into a similar case, and I found a way that works, although it's a bit kludgy. My first try was setting a height and overflow:auto on the container div, along with setting the Raphael paper height to 100%. However, this didn't work; it appears that if you set the paper to 100%, it grabs the height of the div as it is before the chart is inserted, so that's no good.
However, a workaround is to do the following, assuming that the container div has an id of "holder", that I need the scrollable area to be 100px high, and that the Raphael paper object should be 800px wide:
var paper = Raphael('holder', 800, '100%');
// add your graphics to the paper object here
var height = $(paper.canvas).outerHeight();
paper.setSize(800, height);
$(paper.canvas).parent().height("100px");
I used jQuery to get and set the heights, but you could do that however you wish. The important point is to not set any restrictions on the height until after you've already created all the Raphael objects, then set the height of the paper object and the containing div to whatever you wish.
Note that if you simply want everything to show up, and don't need to fit the graphic into a specific height using scroll bars, you can just pass 100% as the height to the paper constructor, and forget everything after the first line of the sample above.
So how to get the size of an SVG file with javascript when width and height are not set on the svg element? The svg is a string, but could be made a DOM if necessary.
You can use the getBBox() method of the SVGElement object. It tells you the width and height, x, and y offset in pixels without taking into account the scaling of the element.
document.getElementById('myelem').getBBox().width
document.getElementById('myelem').getBBox().height
are what you're looking for, I think.
EDIT:
I've recently also learned that the little known getBoundingClientRect() works as well! You can also do: var el = document.getElementById('myelem'); var mywidth = el.getBoundingClientRect().width;
Keep in mind that there is a difference between getBBox and getBoundingClientRect. getBBox gets the initial dimensions - getBoundingClientRect also respects the transformations done with scale etc.
SVGs are scalable vector graphics, and thus can have any arbitrary height and width. Only the ratio is fixed by the format.