javascript - Can't set canvas size with getComputedStyle function -

so, problem getcomputedstyle function works strange. firstly canvas id, var canvas = document.getelementbyid('canvas') use getcomputedstyle function, , try set new width , height values. thing ignores height, , takes width.

javascript:

var newcanvas = getcomputedstyle(canvas)  var width = parseint(newcanvas.getpropertyvalue('width'), 10) var height = parseint(newcanvas.getpropertyvalue('height'), 10)  canvas.height = height canvas.width = width 

html:

<canvas id="canvas" width="480" height="320"></canvas> 

css:

canvas {     display: block;     margin: 10px auto;     border: 3px solid black;     border-radius: 10px;     height: 50%;     width: 75%; } 

when change height value (in css file), doesn't affect size of canvas. when change width value, both width , height change.

i wouldn't rely on getcomputedstyle since might handled inconsistently across browsers. instead, use canvas.offsetwidth , canvas.offsetheight.

also note there distinction between canvas size attributes , canvas style. canvas width , height command how big drawing area whereas style merely changes how big output is. if think of canvas image (which how browser treats it), has width , height can control how stretch/position using css properties.

jsfiddle