How to scale canvas and keep its position on screen?


Tags: javascript,html,css,canvas

Problem :

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

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

How can I fix this and get what I want?



Solution :

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/


    CSS Howto..

    How do I stretch a div to be the height of the document body, not the viewport? (included code)

    How to select multiple elements using CSS

    How to resize QR code?

    How to Have the Div Aligned to the Middle, and That Relative to the Parent Div?

    How can I have a blue background on a hover even with css? [closed]

    How to make different font families appear same size? (computationally)

    How to do aspect to fill in img tag?

    How to serve css files in djangos's flatpages?

    How To Get Color of WebElement From Complicated css case using Webdriver?

    How to add a disabled internal Style node to HTML5 DOM?

    How can I set all columns to be the same height? [duplicate]

    How to make vertical text change into horizontal text in css?

    Why my asp.net page is not showing styles I set

    Bootstrap How-to: checkbox should change text input value when selected/checked [closed]

    How to make border for UL if Li has style “float:left;”?

    How to change image size on featured images in wordpress?

    How to make CSS button appear transparent

    How to add event handlers to DIVS with CSS classes containing a particular string?

    How to vertically center inline elements in CSS

    Bootstrap 3: How to code my banner?

    How do I align these links inside inline-blocks to the top?

    How should I divide up CSS files to support multiple devices?

    How to addClass with css3 Animation?

    How to append text after last css class

    How to reduce amount of space between lines of text

    How to style a 3rd-party iFrame [duplicate]

    How to use Jekyll baseurl in css files

    How to add !important to every element in a CSS file [duplicate]

    PHP+CSS Obfuscation - PHP ord THEN PHP strrev + CSS reverse text, how to get the special chars validated backwards?

    How to extract class names from a CSS selector?