title: How put percentage width into html canvas (no css)
body: <p>I have an image and have overlaid a canvas on top of it so that I can draw 'on' the image without modifying the image itself.  </p>
  
  <pre><code>&lt;div class="needPic" id="container"&gt;
      &lt;img id="image" src=""/&gt;
      &lt;!-- Must specify canvas size in html --&gt;
      &lt;canvas id="sketchpad" width="70%" height="60%"&gt;Sorry, your browser is not supported.&lt;/canvas&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I can specify the width and height in pixels in the above canvas line and it works great, however I need this to dynamically sized based on screen size (has to work on small smartphones as well as tablets). When I try to put the percentage in as shown above, it interprets it as pixels. Thus, the canvas will be 70px wide and 60 px tall.</p>
  
  <p>For some reason I can't size the canvas in the CSS so looks like I have to do it in the html. To clarify, when I try to specify the canvas dimensions in the CSS they don't actually change the size of the canvas. It seems as if the image is interfering in some way.</p>
  
  <p>Any help would be appreciated.</p>
  
  <p><strong>Update:</strong>  If I do <code>&lt;canvas id="sketchpad" style="width:70%;height:60%;"&gt;&lt;/canvas&gt;</code> then it defaults to a height of 150px and width of 300px (regardless of device) and then <em>stretches</em> the canvas to fit the div. I set the div to be 60% width and 60% height in the css, thus the canvas stretches to fill that. I confirmed this by logging the canvas.width vs canvas.style.width -- canvas.width was 300px and canvas.sytle.width was '60%' (from the parent div). This causes some really strange pixelation and drawing effects...</p>