Come inserire la larghezza percentuale nella tela html (no css)

Question

Ho un'immagine e ho sovrapposto una tela sopra di essa in modo che possa disegnare "sull'immagine" senza modificare l'immagine stessa.

<div class="needPic" id="container"> 
    <img id="image" src=""/> 
    <!-- Must specify canvas size in html --> 
    <canvas id="sketchpad" width="70%" height="60%">Sorry, your browser is not supported.</canvas> 
</div> 

posso specificare la larghezza e l'altezza in pixel nella linea di tela sopra e funziona grande, tuttavia ho bisogno di questo di dinamicamente dimensionate in base alle dimensioni dello schermo (deve lavorare su piccoli smartphone così come compresse). Quando provo a inserire la percentuale come mostrato sopra, la interpreta come pixel. Pertanto, la tela sarà larga 70 px e alta 60 px.

Per qualche motivo non riesco a ridimensionare la tela nel CSS così sembra che debba farlo in html. Per chiarire, quando provo a specificare le dimensioni del canvas nel CSS, in realtà non cambiano le dimensioni del canvas. Sembra che l'immagine stia interferendo in qualche modo.

Qualsiasi aiuto sarebbe apprezzato.

Aggiornamento: Se faccio <canvas id="sketchpad" style="width:70%;height:60%;"></canvas> allora default ad un'altezza di 150px e larghezza di 300 px (a prescindere dal dispositivo) e poi tratti la tela per adattarsi alla div. Ho impostato il div su 60% di larghezza e 60% di altezza nel css, quindi il canvas si allunga per riempirlo. L'ho confermato registrando canvas.width su canvas.style.width - canvas.width era 300px e canvas.sy.width era '60% '(dal div principale). Questo fa sì che alcuni davvero strano pixelation e gli effetti di disegno ...