Juan Bonnett Juan Bonnett - 3 months ago 9
HTML Question

Canvas - Maintain a 19:6 aspect ratio relative to Height

This questions should be very easy, I haven't been able to find out! even seeing other posts about keeping aspect ratio, because they're all talking about maintaining an aspect ratio relative to width.

For example, if I want it to have a full Width canvas and keep an aspect ratio of 16:9 I would use this code:

var can = document.getElementById('canvas');
can.width = window.innerWidth;
can.height = can.width * (9 / 16);


I'm trying to make a Canvas the height of the user browser, that's the easy part.

But how can I calculate what Width the canvas should have? For example:

If I have the height 768, I know the width should be 1360, that would keep an aspect ration of 16:9, but what's the formula to calculate the width seeing that the height is variable?

Thank you before hand!

Answer

Based on your code, the relative width can be calculated as follows

var can = document.getElementById('canvas');
can.height = window.innerHeight;
can.width = can.height * (16/9);