Discussions

Qwidth100%のときcanvas上での座標がうまく取得できない

やりたいこと
canvas上でお絵かきしたいです。

問題点
canvasのwidthとheightを100%にすると、座標がうまく取得できずマウスからずれたところに線ができてしまう。
widthとheightの指定を外す(添付コード参照)とうまくいきますが、100%で指定した場合でも、うまくいく方法はあるのでしょうか?

Sample Code

AAnswer to: width100%のときcanvas上での座標がうまく取得できない

kyo_ago

一応初期状態に対しては正常に座標を取得できるようになりましたが、このままだと要素の幅が動的に変わらないので、width:100%と同じ動作にするのであれば周囲の要素のサイズ変更時にwidthを設定しなおす必要があります。
ただ、widthを設定しなおすと描画内容がクリアされるようなので、そもそもこの方法ではwidth:100%を再現できないかもしれません。

edo_m18

kyo_agoさんの回答への補足ですが、
widthを変更した際に内容が初期化される問題に関しては、ctx.getImageDataを使って
一時的に現在描かれている状態を保存しておき、widthの設定が終わった段階で
putImageDataを使って復元することである程度回避できるのではないかなと思います。

ただ、canvas自身のサイズが変わるので、多少描画位置がずれたり、ということはあるかもしれません。

Post a question

You can post JavaScript, HTML, CSS related questions with attached reference to actual codes and get the answers likewise.

Ask a question

  • 1. Click the ‘Post a question’ above

  • 2. Enter question details, reference code, and click ‘Add question’ button

  • 3. Question will be paired with the code on display

Add an answer

  • 1. Choose a question

  • 2. Enter answer details, attach the reference code and click ‘add answer’ button

  • 3. Your answer will accompanied with attached code

Tag