title: How to change the style size of a canvas dynamically by JavaScript?
body: <p>The size (width and height) of a canvas can be changed, but the style size of the canvas can not be changed dynamically.</p>
  
  <pre><code>canvas = document.getElementById('test_fabric');
  ctx = this.canvas.getContext('2d');
  canvas.style.width = 1000;  // does not work.
  canvas.style.height = 260;  // does not work.
  canvas.width = 100;  // works.
  canvas.height = 100;  // works.
  </code></pre>
  
  <p>Both canvas.width and canvas.height work well, but both canvas.style.width and canvas.style.height do not work.</p>
  
  <p>In my case, the style size of the canvas only can be changed by a css file or inline style of the canvas.</p>
  
  <pre><code>canvas#test_fabric {
    width:400px;
    height:400px;
    background:gold;
  }
  </code></pre>
  
  <p>or</p>
  
  <pre><code>&lt;div&gt;&lt;canvas id="test_fabric" width="200" height="200" 
  style="width:200px; height:200px"&gt;&lt;/canvas&gt;&lt;/div&gt;
  </code></pre>
  
  <p>Note: The css file becomes ineffective when the inline style exists.</p>
  
  <p>What's the way to change the style size of a canvas dynamically by JavaScript?</p>