画像があり、その上にキャンバスを重ねて、画像自体を変更せずに画像上に描画できるようにしました。
<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>
、デフォルトで高さ150px、幅300px(デバイスに関係なく)になり、divに合わせてキャンバスが引き伸ばされます。css で div を幅 60%、高さ 60% に設定したため、キャンバスはそれを埋めるように伸びます。canvas.widthとcanvas.style.widthをログに記録することでこれを確認しました-canvas.widthは300pxで、canvas.sytle.widthは「60%」でした(親divから)。これにより、非常に奇妙なピクセル化と描画効果が発生します...