Can anybody tell me why the default canvas size is 300 x 150 pixels?:
http://jsfiddle.net/VqNAV/
And why my 50 x 50 square ( http://jsfiddle.net/VqNAV/1/ ) get stretched when I change the canvas size: http://jsfiddle.net/VqNAV/2/
Thanks in advance!
Edit:
I found an answer here: https://www.w3.org/Bugs/Public/show_bug.cgi?id=13818#comments
For canvas, if you do NOT want the context to be stretched, you must modify the HTML attributes. http://jsfiddle.net/VqNAV/3/
EDIT: I think the better question is why is it inline? There is nothing in the HTML 5 draft that specifies that this is how it should be. This was a decision upon the browser creators. The canvas acts as an image and is thus treated like an image which is also inline and also has a width and height.
Related
Does it add to the image if too small or crop if too big or just stretch the image to the desired size?
When you set interpolation=2, then you are using Bilinear interpolation, ti can be either used for upsampling or down sampling. In the case of upsampling you are doing something like
There are several types of upsampling and down-sampling, but bilinear one uses a combination of the neighbouring pixels to cimpute the new pixel.
Look to this links for more informations: link1; link2
Resize stretches the image to span the new size. It samples from the original image using the provided interpolation method.
I have the following goal: I wanted to place a heart within a container - scaled and positioned.
First I wanted to use an icon font but I've discarded the idea. Second option to load the heart as an image I've discarded too - I have to use the heart a few times on my recent project and I wanted to save http requests. Therefore I wanted to go with the SVG as a background-image option. But the problem is, somehow I am unable to tame that beast. I've built a sample pen to illustrate the issues and parts I don't understand.
The un-base64-encoded optimized SVG looks like that:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 960"><polygon points="756,168.4 593.5,168.4 480,258.3 366.5,168.4 204,168.4 30,349 480,791.6 930,349"/></svg>
The sample code you can find from my codepen.
Basically I have three related questions (normally I prefer to post separate issues but those three questions are basically way too connected therefore I hope it's ok):
The sizing: .heart1 has a width and height of 100% and everything displays fine. If you use suiting px values all is fine too but if you try to enter ems the heart isn't shown anymore. Why?
The green box: .heart1 has a width of 100% but if you drag the browser window bigger the heart only grows to some point and then only the green box keeps on growing. I thought SVGs are more or less able to scale to "infinity"?
The yellow box: My basic goal was to make the heart a bit smaller than the width of the yellow box, center it horizontally within and give the heart some top margin. Width and height of .heart2 are set to 75%. But somehow I am unable to position the heart within the box neither with top, left and/or right properties nor in background:url with "no-repeat center 2em" e.g. . It just doesn't react.
I use a block of code shown below to fit svg in a DIV. It works best in a DIV with the same width/height. As you can see below it uses getBBox() to change its viewBox, plus changes the svg width/height values.
It works cross browser: IE10+/CH31/FF23
var bb=mySVG.getBBox()
var bbw=bb.width
var bbh=bb.height
//--use greater of bbw vs bbh--
if(bbw>=bbh)
var factor=bbw/divWH
else
var factor=bbh/divWH
var vbWH=divWH*factor
var vbX=(bbw-vbWH)/2
var vbY=(bbh-vbWH)/2
//---IE/CH---
if(!isFF)
{
var ViewBox=mySVG.viewBox.baseVal
ViewBox.x=vbX
ViewBox.y=vbY
ViewBox.width=vbWH
ViewBox.height=vbWH
}
else
mySVG.setAttribute("viewBox",vbX+" "+vbY+" "+vbW+" "+vbH)
//--requred for FF/CH---
if(!isIE)
{
mySVG.setAttribute("width","100%")
mySVG.setAttribute("height","100%")
}
else
{
mySVG.removeAttribute("width")
mySVG.removeAttribute("height")
}
The svg is centered both left/right and top/bottom within the DIV, plus maintains its aspect ratio. This should help get you started.
Let's say i have a div that i've defined to be (32px, 32px) in size:
html:
<div id="theBox"></div>
css:
div {
width: 32px;
height: 32px;
background-color: gray;
}
(Live jsFiddle view)
How can i get the actual size of the box in pixels?
You'll note that the box doesn't have to be 32px. It can be larger:
or smaller:
or exactly 32 pixels:
The reason for the differences, of course, is because Chrome and Internet Explorer allow me to zoom.
i would like to know the actual size of the element. Why? No reason; just cause. i'm curious, and i'd like to broaden the limits of human knowledge and understanding.
Or because i need to set the internal resolution of a Canvas element to match the actual size of the canvas element - otherwise the rendered canvas contents will get stretched without my permission:
Although, my reasons for wanting to know the size of an element do not necessarily apply just to a Canvas. i'm asking about a generic div element; and the answer will be used towards canvas, img, video, and anything else i desire.
You would need to detect the zoom level.
Then write a simple arithmetic proportion to calculate the 'actual' size, or the size as it appears to the user.
var zoomLevel,
, actualSize = 32
, viewSize;
function getZoomLevel(){ ... your code here...return zoomLevel;}
function getViewSize(actualSize){
viewSize = actualSize*getZoomLevel();
return viewSize;
}
Then ... call getViewSize() when ready ...
Hopefully the math is clear enuff.
Solving for y (or viewSize):
actualSize/1 = y/zoomLevel
However, you will need to be careful about sub-pixel precision, especially among the notoriously bad length/width determining browsers like IE9. But, as long as all you need is something close, this should work.
I am currently learning how to use HTML5 new elements and I stumbled upon a frustrating issue with all graphic functions such as fillRect() and drawImage().
I was setting the widgth and height with
style="width: 75px;height: 10px;"
instead of
width="200" height="100"
The result being that the graphics would not be the proper scale ever.
My question is, why does it make a difference? There is something I obviously do not understand about it all.
Thank you
I know that at least in JSF (specifically primefaces) the difference is that if you put height in the style- it will not be used to properly calculate and render the component (the more complex ones) sometimes. If you put it as attribute then it will work.
If HTML5 takes the similar approach it would mean that attribute height and width are the actual height and width of the component and the style is just the way to display it. Sometimes however, both approaches are going to end with the same result.
Also in primefaces when you specify height and width as attribute- you can not use percentages. This could be the key- an additional measure of enforcing specific width and heights rathen than percentages.
It was an extremely frustrating issue trying to figure out why canvas
doesn't render its shapes correctly despite doing everything right.
The fix was to set "canvas.height" and "canvas.width" correctly. Just setting "canvas.style.height" and "canvas.style.width" doesn't
rectify internal rendering of the canvas.
Almost every time, your
canvas.height = canvas.style.height
AND
canvas.width = canvas.style.width
I read somewhere that the HTML engine refers "canvas.width" and "canvas.height" while doing the calculations for painting shapes and text inside the canvas.
Whereas, "canvas.style.height" and "canvas.style.width" only determine how the browser displays that canvas alongside other HTML DOM elements. Thanks to bjedrzejewski and Munsta0 for asking this question.
I am trying to extract images from a document saved as WordML. Some of the images are cropped from a single resource using attributes on the imagedata element eg:
<v:imagedata r:id="rId8" o:title="" cropbottom="32429f" cropright="44328f"/>
What are the units for the cropbottom and cropright attributes?
I have done some web searching and according to http://msdn.microsoft.com/en-us/library/bb229565%28v=vs.85%29.aspx the units should be percentages but don't seem to be.
In the example above the resulting image should come from the top left of the original and be a third of the width and half the height.
I'll answer my own question in the hope that it is useful to someone else.
According to ImageData Class - Office 2010
CropBottom ... specifies the how much to crop the image from the bottom
up as a fraction of picture size. Default is 0. This numeric value can
also be specified in 1/65536-ths if a trailing "f" is supplied. For
example, a value of "52429f" represents 52429/65536 or 0.8.