What is the need for aspect ratio?

Question

I am experimenting with html5 JavaScript game engines and Cordova. Often I encounter key words like aspect ratio and scaling. Since html5 games deals with canvas and game images are put through the drawImage() i fail to understand the need for aspect ratio while building the games with Cordova. Is there any good example to understand aspect ratio or scaling?

Answer 1

Aspect ratio

Aspect ratio is what you get when you divide an image's width by the height. It can be written as a single number (2), or as a fraction (2/1) or with a colon 2:1.

A perfect square has an aspex of 1 or 1:1, its height is the same as its width. If you have a widescreen monitor it will have an aspect of 16:10 or 1.6, your iphone 3:2 or 1.5 and an old TV has 4:3 or 1.3. The closer the number gets to 1 the squarer the image/screen/thing is.

The aspect ratio is size and unit invariant. That means that no matter how large the object is, or what units its measured in, feet, meters, inches or millimeters the aspect is always the same.

If you have the aspect then all you need is the length of one side and you can work out the length of the other size. So if you had a wide screen TV aspect ratio 16:9 or 1.7 and it was as tall as you then you also know that it will be 1.7 times as wide as you if you layed down beside it.

When you resize an image you have to know its aspect ratio or you will squash or stretch the image. For example if you take a widescreen movie (16:9 or 1.7) and make it fit on a old TV (4:3 or 1.3) because the aspect has changed everything will get squashed and look skinny.

Aspect ratio in code.

In javascript an image has a width and height property expressed as pixels. To work our the aspect ratio is easy

var aspect = image.width / image.height;

If you want to make that image fit a region that is 1000 pixels high. You know that the width will be equal to the height times the aspect.

ctx.drawImage(image, 0, 0, 1000 * aspect, 1000);

If you want to fit a 1000 pixel width then you divide the width by the aspect to get the height.

ctx.drawImage(image, 0, 0, 1000, 1000/aspect);

It wont get squashed, circles will still be circles, squares will still be square and skinny people will still look skinny.

A famous aspect ratio is the golden ratio 1.618 or 16:10. It is said to be the most pleasing to look at. Many famous paintings have that aspect from way back, as well as building, sculptures, landscapes and more.

Another well know one, and a very handy aspect ratio is the square root of 2 : 1. it is the aspect ratio of the A0, A1, A2 .. paper and has a property no other aspect ratio has. If you take a A0 sheet of paper and fold it in half then turn it on its side the aspect of the folded sheet is still square root of 2 : 1. Its size is now A1, fold again to get A2, then A3... No mater how often you fold it the aspect still stays the same. It is the only aspect ratio that has that property.

Hope that helped explain what aspects ratios are, what they are used for, and how to use them..