29
26

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Posted at

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());

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

29
26
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
29
26

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?