Following http://www.html5canvastutorials.com/tutorials/html5-canvas-rectangles/, I have drawn some rectangles side-by-side on a canvas. The problem is that they appear greatly zoomed in; at a zoom of 1.0 they appear approximately five times their original size; they appear correctly sized (if fuzzy around the borders) at a zoom of around 0.16.
I expect I could get a workaround by making the pixel dimensions of the canvas much greater and zooming out, but what is the proper way to get a 1:1 scaling on a canvas? The canvas is styled to width and height of 100%, and the body has a margin of 0. Manually setting the canvas's width and height to the height and width of the window does not alter this behavior.
TIA,
the problem is, you set the width and height of the style for the canvas. You need to set the width and height attributes, not the css style. so something like:
<canvas id='mycanvas' width='800' height='600'></canvas>
More info in a similar question: Canvas is stretched when using CSS but normal with "width" / "height" properties
Related
I am trying to get exact pixel counts on an svg, but it seems off. I want it to be 300x56, but for some reason its rendering as 222x41
This is the code
But it seems like the pixels are inconsistent when I inspect:It says 222x41 here
but 300x56 here
How is 222x41 calculated, and why does chrome debugger show both 300x56 and 222x41?
Explaining what you are seeing would require seeing more of the page. We would need to see how the element containing the <svg> is styled.
But here's a quick explainer.
The area of your page that the SVG is displayed in is called the "viewport". The size of the viewport is determined by one of two things:
The width and height of the SVG if they use explicit units - such as px, or
The size of the SVGs parent container if the SVG specifies percentage units.
Your SVG has a viewBox this determines which area of the SVG canvas is displayed in the viewport. The browser will scale the area of the viewBox up of down so it fits in the viewport. Unless you turn it off, the contents will keep its aspect ratio
So since your SVG has a viewBox and its width and height are set to "100%", the SVG viewport will be scaled to fit into the parent container and the SVG contents will be scaled to fit into that viewport.
You said you were trying to make the SVG be 300x56, but it looks like all you did to try and achieve that is set the <rect> to that size. That is not enough because of the reasons stated above. The effect of the viewport and the viewBox will be affecting the size that the rectangle is drawn at.
The viewBox of your SVG is 1500x280. Your rectangle is occupying a small part of that - from (10,10) to (310,66). Since your rectangle is being scaled down to 222.93x41.61, the SVG's parent container must be smaller than the viewBox. We can work out how big it must be:
1500 * (222.93/300) ~= 1115 (if the width is constrained) or
280 * ( 41.61/ 56) ~= 208 (if the height is constrained).
If you want your SVG to be exactly 300x56 always, then what you probably want is to set the SVG's width and height, not the rectangle's.
<svg width="300" height="56">
<rect width="300" height="56" rx="4"/>
</svg>
Now the SVG will behave the same as if it was a 300x56 pixel PNG.
I am currently learning css and I have encountered some question about the SVG img. I have discovered that some SVG will take up the whole width of webpage if their width or height are not set, while some don’t and have a defined size. What does this property called? Is it related to the design of SVG image? example
Also, if I put a SVG which takes up the whole width of webpage into a flex box, the SVG will decrease in size. Why does this happen? Considing that a normal image and a SVG with defined size will not decrease the size in the same situation.example(fixed with class = "flex" instead of id).
I am also wondering how does the computer determine what size should the SVG decreased to? I have tried a few SVG(which take whole width) and almost each of them will decreased to a value near 150px x 150px in the flex box.
outer <svg> elements are replaced elements in CSS/HTML parlance and follow the rules for replaced element sizing
In particular if replaced elements have no defined size the browser falls back to a size of 300px x 150px, which is likely what you're seeing.
Normal i.e. raster images always have a defined size and are not replaced elements.
See also the SVG specification for how CSS affects SVG sizing
I am doing an animation on a 1320px * 1440px html5 canvas. But I don't want to see this huge canvas on the screen rather I want to see this on a 550px * 600px canvas so that the drawing quality looks better. how to do this?
You are decreasing the height and width by a factor of 2.4, so you simply need to decrease the canvas and the animation inside it by that factor as well.
Make the canvas width attribute = 550 and the height attribute = 600
Multiply the animation width and height by .4167 (or 1/2.4) to scale it appropriately. You could easily do that by using the context.scale(.4167, .4167); method before drawing anything.
More information about scale() here.
Consider the following layouts:
The cyan rectangle has a set ratio. That is - The width of the rectangle is derived from the height of its container by a set ratio.
The blue rectangle height is set according to the height of the container, its width is set as the rest of the available viewport width.
The container of the cyan and blue rectangles can be changed via dragging.
Dragging is easily achievable via JS. The layout described can be achieved via CSS.
The end result of changing that viewport size (browser width) and container height via dragging, is that the blue container may change aspect ratio from portrait to landscape and vice versa.
My question -
Is there a way in CSS to style the blue container according to its aspect ratio? (portrait\landscape)
I thought about using media queries, but these only query the dimension of the browser and not those of an arbitrary container within the DOM.
Also I don't really like the idea checking the ratio in JS and adding\removing classes accordingly - it feels seems kind of unscalable to inject presentation layer logic into JS like that.
Having trouble scaling with . It seems to make sense to code up a drawing in canvas to a fixed size (ie 800x600) then scale it for specific locations - but sizing occurs in 4 places: 1) in the context definition (ie ctx.width = 800 2) with ctx.scale; 3) in html with
I can scale it with ctx.scale(0.25,0.25) and use but this doesn't appear right - it seems to want the scale to be proportional.
css sizing simply makes it fuzzy so not a good way to go. Any ideas?
Actually, you can resize a canvas using stylesheets. The results may vary across browsers as HTML5 is still in the process of being finalized.
There is no width or height property for a drawing context, only for canvas. A context's scale is used to resize the unit step size in x or y dimensions and it doesn't have to be proportional. For example,
context.scale(5, 1);
changes the x unit size to 5, and y's to 1. If we draw a 30x30 square now, it will actually come out to be 150x30 as x has been scaled 5 times while y remains the same. If you want the logo to be larger, increase the context scale before drawing your logo.
Mozilla has a good tutorial on scaling and transformations in general.
Edit: In response to your comment, the logo's size and canvas dimensions will determine what should be the scaling factor for enlarging the image. If the logo is 100x100 px in size and the canvas is 800x600, then you are limited by canvas height (600) as its smaller. So the maximum scaling that you can do without clipping part of the logo outside canvas will be 600/100 = 6
context.scale(6, 6)
These numbers will vary and you can do your own calculations to find the optimal size.
You could convert the logo to svg and let the browser do the scaling for you, with or without adding css mediaqueries.
Check out Andreas Bovens' presentation and examples.
You can resize the image when you draw it
imageobject=new Image();
imageobject.src="imagefile";
imageobject.onload=function(){
context.drawImage(imageobject,0,0,imageobject.width,imageobject.height,0,0,800,600);
}
The last 2 arguments are the width an height to resize the image
http://www.w3.org/TR/html5/the-canvas-element.html#dom-context-2d-drawimage
If you set the element.style.width and element.style.height attributes (assuming element is a canvas element) you are stretching the contents of the canvas. If you set the element.width and element.height you are resizing the canvas itself not the content. The ctx.scale is for dynamic resizing whenever you drawing something with javascript and gives you the same stretching effect as element.style.