css - How to change the style size of a canvas dynamicly by JavaScript? -

this question has answer here:

• canvas stretched when using css normal “width” / “height” properties 7 answers

the size (width , height) of canvas can changed, style size of canvas can not changed dynamically.

canvas = document.getelementbyid('test_fabric'); ctx = this.canvas.getcontext('2d'); canvas.style.width = 1000;  // not work. canvas.style.height = 260;  // not work. canvas.width = 100;  // works. canvas.height = 100;  // works. 

both canvas.width , canvas.height work well, both canvas.style.width , canvas.style.height not work.

in case, style size of canvas can changed css file or inline style of canvas.

canvas#test_fabric {   width:400px;   height:400px;   background:gold; } 

or

<div><canvas id="test_fabric" width="200" height="200"  style="width:200px; height:200px"></canvas></div> 

note: css file becomes ineffective when inline style exists.

what's way change style size of canvas dynamicly javascript?

thanks in advance!

the style properties' width , height requires measurement values while html attributes' width , height not require. so, need set px, em or % etc. explicitly in code:

canvas = document.getelementbyid('test_fabric'); ctx = canvas.getcontext('2d'); canvas.style.width = '1000px'; // explicitly setting unit 'px' canvas.style.height = '260px'; 

style.width/height without unit invalid rule css.