How to scale canvas and keep its position on screen?

Question

I need to scale canvas (that have 1920px width and 1080px height) to fit screen width and keep its position on screen, like this:

I tried apply CSS-rule transform: scale(0.6666) to canvas DOM, but I've got this:

How can I fix this and get what I want?

just set width and height of the container div to 100%. Just a question too, why do you only want to scale in the x direction ? — thatOneGuy, Jan 29 '16 at 11:08
@thisOneGuy 'cause width of screen is larger than height, and I need my canvas to be on the screen completely — Alex Solari, Jan 29 '16 at 11:16
would you be willing to use javascript or jquery or are you just wanting the answer in css ? — thatOneGuy, Jan 29 '16 at 11:18
@thisOneGuy setting width and height of the container div to 100% doent work, still displaying in a wrong way — Alex Solari, Jan 29 '16 at 11:19
yeah of course if you dont want it skewed dont do it that way. Have you seen this : http://stackoverflow.com/questions/8894506/can-i-scale-a-div-height-proportionally-to-its-width-using-css — thatOneGuy, Jan 29 '16 at 11:19
i know it was solved, but for anyone else, i have added to my answer by using CSS only :) — thatOneGuy, Feb 04 '16 at 16:35

thatOneGuy · Accepted Answer · 2016-02-04T16:35:18.327

OK if you want to use javascript:

You need to know the scale you want to use.

var originalWidth = document.getElementById('container').offsetWidth;
var originalHeight = document.getElementById('container').offsetHeight;

var scale1 = 1080/1920; //if width is always bigger than height
var scale2 = originalWidth/originalHeight; 

//var scale1 = 1080/1920; //if height is always bigger than width
//var scale2 = originalWidth/originalHeight; 

window.onresize = function(event) {
    var getWidth = document.getElementById('container').offsetWidth;

    document.getElementById(('container').setAttribute("style","height" + getWidth*scale1);
};

In your CSS set the width to 100% so it scales automatically and you use the javascript to set the height.

Scale1 is one you preset to keep it consistent, so is scale2 but I would only use scale2 if you resize when the screen is on. For example, on desktop, when resizing the window as you set the scale when it's first launched.

Here is a fiddle showing it working : http://jsfiddle.net/d4kVk/239/

EDIT :

Recently I ran in to how to do this in css with two simple lines :

width: 100vmax;
height:56.25vmax;

'vmax' gets the highest value out of width and height. So putting the value 56.25 for vmax in height (as in 1080/1920, i.e your aspect ration) solves your problem :)

Updated fiddle : http://jsfiddle.net/d4kVk/246/

It looks like that what I need, I'll test it and I'll then tell you results — Alex Solari, Jan 29 '16 at 12:04

How to scale canvas and keep its position on screen?

1 Answers1