In html5 canvas element use I have a problem with default aspect ratio.
The default aspect ratio for the canvas element in Firefox and Safari, at least
appears to be 2/1 for width and height. This is the only combination of height
and width that will produce a 1:1 aspect ration for rectangle drawn to the
canvas element.
So, how do I set the aspect ratio for the canvas element that will allow
a 1:1 ratio for items drawn to it?
I have an account with Coding Forums and have not gotten an adequate response.
I have obtained some print texts on the subject but they do not address this.
I have been programming javascript/html/css for at least 10 years.
I hope I'm not stuck with a unalterable default ratio.
Looking over the list of similar questions, I don't see this particular issue addressed.
The Canvas can have it's own width and height which is independent of the Dom element.
This is causing the non 1:1 aspect ratio.
To fix you need to set the width and height attributes to match the width and height of the dom containing element.
For example, in jquery you can do the following.
$('canvas').attr('width', '100').attr('height', '100');
This will make your canvas a 100 pixel square. Assuming this is in a dom element with matching width and height properties then you'll get 1:1 aspect ratio.
Related
How would one go about finding the maximum and minimum x & y values in an svg, in the presence of a viewbox that is. The issue that occurs is that I am attempting to create a partially transparent rect overlay. However, the different versions of android spew out wonderfully inconsistent differences between container widths. Rephrasing the question for clarity how would one find the visible coordinates of an svg where the coordinates lie outside the viewbox, but the aspect ratio has been preserved?
So I've run into troubles when making my web app responsive. I've managed to make it so that the SVG adapts when the width is resized, but I've run into trouble with height.
The best solution I've come up with for height resize is the following js/jQuery code:
function updateWindow(){
var y = (($(window).height()));
svgMap.style.height=y;
}
updateWindow();
window.onresize = updateWindow;
What this does is set the SVG viewport height to equal that of the window.. This works in a sense that it centers the SVG with the browser window's height. Not so excellent, it screws up on mobile devices and adds a strange top-margin almost. It also makes the SVG slightly smaller unless I multiply "y" by some value greater than one. Doing so, however, increases the margin-top esque gap. How troublesome..
You can view the demo here:
http://zadias.me/SVG/Harrison%20Wilson/HarrisonWils.html
and the demo w/o the height center change here: http://zadias.me/SVG/Harrison%20Wilson/HarrisonWils%20-%20Copy.html
To sum things up, How does one go about centering an SVG within an <object> tag, horizontally AND vertically. Also, I would like it so that the SVG map itself fills the wrapper container.
Any help is appreciated, thanks.
EDIT: So I've given up on trying to get it to just fit the parent's height.. Instead I just wrote some JS that will prompt the user with a warning if the height is too small that it will cause overflow of the page. I also made it so that it would be styled perfectly by adding inline CSS to each page, accompanied with media queries.
If you set the SVG's width and height to 100%, ie.:
<svg width="100%" height=="100%">...
then it should just be a matter of resizing the container that the SVG is inside. The preserveAspectRatio setting of "xMidYMid meet" should then centre it vertically.
I use jcrop to provide users with a friendly way of uploading their images via ajax. Obviously these images have some constraint like width and height which is where jcrop comes into play. So for the sake of brevity what im doing is as follows:
input file select via javascript file api loads the image into a img tag. Jcrop works with this image tag and renders the result onto a html canvas.
Now this is the dodgy part. The canvas image is always blurry...
for arguments sake the canvas is set to 400x200 which is the crop size.
If the canvas width and height is set via CSS it results in a blurry image result. TO get around this I had to set the width and height via html attributes. Now I have a wonderful cropping solution that can save images via AJAX. Crisp and Clear:)
<canvas id="preview" width="400" height="200"></canvas>
According to HTML Standard, if width or height attribute is missing, then the default value must be used instead, which is 300 for width and 150 for height. And these two attributes will determine the canvas's width and height, while the css properties merely determine the size of the box in which it will be shown.
The canvas element has two attributes to control the size of the element's bitmap: width and height. These attributes, when specified, must have values that are valid non-negative integers. The rules for parsing non-negative integers must be used to obtain their numeric values. If an attribute is missing, or if parsing its value returns an error, then the default value must be used instead. The width attribute defaults to 300, and the height attribute defaults to 150.
The intrinsic dimensions of the canvas element when it represents embedded content are equal to the dimensions of the element's bitmap.
The user agent must use a square pixel density consisting of one pixel of image data per coordinate space unit for the bitmaps of a canvas and its rendering contexts.
A canvas element can be sized arbitrarily by a style sheet, its bitmap is then subject to the 'object-fit' CSS property.
You can refer to the following post for more details:
Canvas is stretched when using CSS but normal with "width" / "height" properties
This is really just an extension of the answer above. I too encountered the problem of CANVAS images resized using Javascript/CSS becoming fuzzy and blurry, because my application first used HTML to create a few DIVs, one of which held a CANVAS control, then the ONLOAD event called a Javascript routine to get the screen size, optimise the sizes and positions of all the DIVs and the CANVAS accordingly, and finally draw on the CANVAS. I did it that way as I wanted the CANVAS to always be as big possible for whatever device it was viewed on.
My solution is to use Javascript to dynamically draw the CANVAS control too, i.e. for the DIV that contains the CANVAS simply include...
var CanvasWidth=screen.availWidth-30;
var CanvasHeight=screen.availHeight-190;
//The 30 and 90 above are arbitrary figures to allow for other DIVS on the page
var o=window.document.getElementById("IdOfDivContainingCanvas");
o.innerHTML="<canvas id='myCanvas' width='"+CanvasWidth+"' height='+CanvasHeight+'></canvas>";
...so that the size of the CANVAS is effectively dynamic; Created with it's size specified using HTML attributes, just before executing the Javascript statements that actually draw on the CANVAS.
I'm trying to take div and resize it according container which is resized on window.resize but i need it to mach some specific aspect ratio.
var hconainer,wcontainer;
hconainer=$('#container').height();
wconainer=$('#container').width();
now i need that h:w=some specific aspect ratio.
I'm trying to create an image object or canvas object that will resize based on the window dimensions, but keep the aspect ratio. Is this possible?
I know that with canvas, you can maintain bicubic scaling, but is it possible to have the image scale on the window resize while maintaining the aspect ratio?
You might want to give this a shot:
http://css-tricks.com/how-to-resizeable-background-image/