Jak ustawić szerokość procentową w kanwę html (bez css)?

Question

Mam obraz i nałożyłem na niego płótno, aby móc narysować "obraz" bez modyfikowania samego obrazu.

<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> 

mogę określić wysokość i szerokość w pikselach w powyższej linii płótnie i działa świetnie, ale muszę to dynamicznie sized na podstawie rozmiaru ekranu (musi pracować na małych smartfonów oraz tabletów). Kiedy próbuję umieścić procent w sposób pokazany powyżej, interpretuje go jako piksele. Zatem płótno będzie miało szerokość 70 pikseli i wysokość 60 pikseli.

Z jakiegoś powodu nie mogę zmienić rozmiaru płótna w CSS, więc wygląda na to, że muszę to zrobić w html. Aby wyjaśnić, kiedy próbuję określić wymiary płótna w CSS, nie zmieniają one faktycznie rozmiaru płótna. Wydaje się, że obraz w jakiś sposób ingeruje.

Każda pomoc zostanie doceniona.

Aktualizacja: Jeśli robię <canvas id="sketchpad" style="width:70%;height:60%;"></canvas> wtedy domyślnie do wysokości 150 pikseli i szerokości rozmiar to 300 (niezależnie od urządzenia), a następnie odcinki płótno dopasować div. Ustawiłem div na 60% szerokość i 60% wysokość w css, a więc płótno rozciąga się, aby wypełnić to. Potwierdziłem to logując canvas.width vs canvas.style.width - canvas.width było 300px, a canvas.sytle.width było "60%" (z div rodzica). Powoduje to, że niektóre naprawdę dziwne pixelation i efekty rysunek ...