HTML Canvas stretches my drawings

Posted by on June 4, 2017

Ever made a paint program with the canvas element only to get your drawings stretched over the canvas? This is due to a “feature” in certain browsers. To get around this you need to specify the height and width INSIDE the canvas element. Specifying it in a STYLE tag or CSS class will not work. So this will NOT work

  <canvas id="mycanvas" style="height:300px;width:400px" >

or this

  <canvas id="mycanvas" class="heightandwidth" >

But this will

  <canvas id="mycanvas" height="300" width="400" >

Tested on OSX 10.12.5 and Chrome 58.0.3029.110 (64-bit)

HTML

Comments are closed.