У меня есть изображение и наложил холст поверх него, чтобы я мог рисовать 'on' изображение без изменения самого изображения.
<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>
Я могу указать ширину и высоту в пикселях в вышеприведенной строке холста, и он отлично работает, но мне нужно это для динамического размера на основе размера экрана (он должен работать на небольших смартфонах и планшетах). Когда я пытаюсь вставить процент, как показано выше, он интерпретирует его как пиксели. Таким образом, холст будет иметь ширину 70 пикселей и высоту 60 пикселей.
По какой-то причине я не могу размер холста в CSS, поэтому выглядит так, как будто я должен сделать это в html. Чтобы уточнить, когда я пытаюсь указать размеры холста в CSS, они фактически не изменяют размер холста. Кажется, что изображение каким-то образом вмешивается.
Любая помощь будет оценена.
Обновление: Если я делаю <canvas id="sketchpad" style="width:70%;height:60%;"></canvas>
, то по умолчанию он имеет высоту 150 пикселей и ширину 300 пикселей (независимо от устройства), а затем растягивает холст, чтобы он соответствовал div. Я установил div в 60% ширины и 60% высоты в css, поэтому холст растягивается, чтобы заполнить это. Я подтвердил это, зарегистрировав canvas.width vs canvas.style.width - canvas.width было 300px, а canvas.sytle.width было '60% '(из родительского div). Это вызывает некоторые действительно странные эффекты пикселизации и рисования...