Help us understand the problem. What is going on with this article?

Canvasの大きさを動的に変更する

More than 3 years have passed since last update.

Canvasの大きさをCSSで指定したら見事にハマりましたよ.
キャンバスの大きさをデフォルト値からの倍率で変更したかったのですが,CSSでwidthとheightをピクセルで指定したところ,キャンバス内で描画される内容が引き伸ばされるようになりました.
描画内容が引き伸ばされないように工夫する必要が出てきてしまって,過去最悪のスパゲッティコード化する恐れがあったので,どうにかならないか調査しました.

canvasタグはwidth属性とheight属性で大きさを決めます.デフォルト値は300x150pxで,CSSでwidthとheightを指定すると,canvasが画像扱いになって引き伸ばされるようです.それならば,canvasタグのwidth属性とheight属性を直接変更してやることで,キャンバスの大きさを動的に変更できるのではないかと仮説を立てました.

test.js
var elem = document.getElementById('map');
elem.setAttribute("width", this.width.toString());
elem.setAttribute("height", this.height.toString());

こんな感じで,直接属性を変更することで,キャンバスの大きさを変更することができるようになります.ただし,描画内容は全く保証されないので,キャンバスの中身を再描画する必要があります.

GRGSIBERIA
なんでもやる人.元未踏クリエータ.三次元幾何学と音響工学を少々.
http://www.grgsiberia.net/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした