Canvasのレスポンシブデザイン対応 - ウェブプログラミングおじさん最近Canvasを使ったゲームを作成したのでその時に知った技をひとつ紹介します。 CanvasはCSSのwidthやheightにパーセントを指定できないので、CSSだけではレスポンシブデザインに対応できないのです。 そこでJavascriptとの連携でこれを解決する方法がこちら。 まずHTMLには、基準となるCanvasのサイズをピクセル単位で指定します。 このサイズは例えばCanvasの最大サイズであったり、Javascriptで扱いやすいキリのよい数字だったりなんでもオッケーです。 また.containerの横幅ををCSSにて可変サイズにします。 <div class="container"> <canvas class="canvas" width="600" height="600"></canvas> </div> そしてJavascriptを以下のように記述します。 $(wi
