【重要】サービス終了のお知らせ

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自身のサイズが変わるので、多少描画位置がずれたり、ということはあるかもしれません。

ssxxxccc

I really loved reading your blog. It was very well authored and easy to undertand. Unlike additional blogs I have read which are really not tht good. I also found your posts very interesting. In fact after reading, I had to go show it to my friend and he ejoyed it as well!
EZ Articles

ssxxxccc

I was surfing net and fortunately came across this site and found very interesting stuff here. Its really fun to read. I enjoyed a lot. Thanks for sharing this wonderful information.
Simple Web Tutorials

ssxxxccc

I really thank you for the valuable info on this great subject and look forward to more great posts. Thanks a lot for enjoying this beauty article with me. I am appreciating it very much! Looking forward to another great article. Good luck to the author! All the best!
Gavazzi

osamashk52

Excellent information on your blog, thank you for taking the time to share with us. Amazing insight you have on this, it's nice to find a website that details so much information about different artists.
Constituci³n de sociedades

joshuaprice153

I've been a reader of this blog since day one and I must say the overall site improved dramatically. And of all the entries I've read so far, this is the most significant for me. Electrician of Orlando

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