HTML Canvas stretches my drawings

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)

Leave a Comment


NOTE - You can use these HTML tags and attributes:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>