javascript - How to scale canvas and keep its position on screen? -

i need scale canvas (that have 1920px width , 1080px height) fit screen width , keep position on screen, this:

i tried apply css-rule transform: scale(0.6666) canvas dom, i've got this:

how can fix , want?

ok if want use javascript:

you need know scale want use.

var originalwidth = document.getelementbyid('container').offsetwidth; var originalheight = document.getelementbyid('container').offsetheight;  var scale1 = 1080/1920; //if width bigger height var scale2 = originalwidth/originalheight;   //var scale1 = 1080/1920; //if height bigger width //var scale2 = originalwidth/originalheight;   window.onresize = function(event) {     var getwidth = document.getelementbyid('container').offsetwidth;      document.getelementbyid(('container').setattribute("style","height" + getwidth*scale1); }; 

in css set width 100% scales automatically , use javascript set height.

scale1 1 preset keep consistent, scale2 use scale2 if resize when screen on. example, on desktop, when resizing window set scale when it's first launched.

here fiddle showing working : http://jsfiddle.net/d4kvk/239/

edit :

recently ran in how in css 2 simple lines :

width: 100vmax; height:56.25vmax; 

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

updated fiddle : http://jsfiddle.net/d4kvk/246/