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

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

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