Canvas.width - キャンパスの横幅を取得、変更する

投稿日:2016/03/03 / 更新日:2016/03/03

JavaScriptの、Canvasオブジェクトのwidthは、キャンパスの描画領域の横幅を取得、変更するプロパティです。何も指定しない場合、横幅300px、高さ150pxになります。HTMLでcanvas要素にwidth属性を指定した場合(<canvas width="100">)、このプロパティを指定したのと同じになります。

2点注意して下さい。1点は、スタイルシートで指定するcanvas要素の見た目の横幅とwidthプロパティで指定する描画領域の横幅が違う概念だということです。例えば、スタイルシートで200pxを指定してwidthプロパティで100pxを指定した場合、ちょうど2倍の大きさに図が引き伸ばされます。描画した後、ブラウザに表示される際は、スタイルシートのサイズに辻褄を合わせるように見た目が引き伸ばされる、または、縮められると覚えておきましょう。

もう1点は描画領域のサイズ(width、またはheight)に変更を加えると、それまでの描画内容が失われてしまうことです。この変更というのは、現在と同じ値を指定するのも含まれます。

サンプルコード

<canvas id="target"></canvas>

// キャンパス要素を取得
var canvas = document.getElementById( "target" ) ;

// キャンパスの描画領域の横幅を500pxに変更する
canvas.width = 500 ;

// キャンパスの描画領域の横幅を取得
var width = canvas.width ;

デモ

「塗りつぶし」のボタンを押すと、描画領域の左上から横幅50px、高さ50pxの範囲を塗りつぶします。描画領域がどのようなものかを示すために、スタイルシートでcanvas要素を横幅200px、高さ200pxに指定して、一方で、プロパティではwidthを100px、heightを200pxにしました。そのため、正方形に塗りつぶしても見た目上は横幅だけ2倍に引き伸ばされるので違って見えます。また、「横幅を更新」のボタンを押すと、widthプロパティの値を更新します。更新するとそれまでの描画内容が失われてしまう点を確認して下さい。

RUN
HTML
CSS
JavaScript

<p>スタイルシートでは<code>200x200</code>、プロパティでは<code>100x200</code>を指定しました。その上で、<code>50x50</code>の範囲を塗りつぶします。</p> <div id="parent"> <canvas id="target"></canvas> </div> <p><a id="method1">塗りつぶし</a></p> <p><a id="method2">横幅を更新</a></p> <p><a id="method3">リセット</a></p>

#parent { border: 1px solid #333 ; padding: 18px 0 ; } #target { width: 200px ; height: 200px ; background: #f2f2f2 ; margin: 0 auto ; display: block ; } a { color: #333 ; display: block ; background: #f2f2f2 ; text-align: center ; padding: 8px ; font-weight: 700 ; } a:hover { cursor: pointer ; background: #e6e6e6 ; } html{ font:400 14px / 1.618 ArialMT,"Hiragino Kaku Gothic ProN","ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic Pro W3","ヒラギノ角ゴ Pro W3","メイリオ","ＭＳＰゴシック","Osaka" ; } code { background: #f2f2f2 ; }

// キャンパス要素を取得 var canvas = document.getElementById( "target" ) ; // 二次元グラフィックスのコンテキストを取得 var context = canvas.getContext( "2d" ) ; // クリックイベント1 document.getElementById( "method1" ).addEventListener( "click", function() { // キャンパスの描画領域を指定する canvas.width = 100 ; canvas.height = 200 ; // 矩型を作成する context.rect( 0, 0, 50, 50 ) ; // 塗りつぶしの色を指定する context.fillStyle = "#D36015" ; // 塗りつぶす context.fill() ; } ) ; // クリックイベント2 document.getElementById( "method2" ).addEventListener( "click", function() { // キャンパスの描画領域を変更する canvas.width = 100 ; canvas.height = 200 ; } ) ; // リセット document.getElementById( "method3" ).addEventListener( "click", function() { // 二次元グラフィックスのコンテキストを取得 var context = canvas.getContext( "2d" ) ; // キャンパスをクリアーする context.clearRect( 0, 0, 200, 200 ) ; } ) ;

構文

width = canvas.width ;
canvas.width = newWidth ;

引数

項目	説明
newWidth	値を代入した場合、描画領域の横幅を変更する。値は数値で指定する。デフォルトでは描画領域の大きさは横幅が300px、高さが150pxとなっている。

戻り値

項目	説明
width	現在のcanvasの描画領域の横幅を取得する。

ノート

サポート状況: 主要な全てのブラウザがサポートしている。Ie8以下はcanvas自体に対応していない。
2種類の横幅がある: ブラウザでユーザーが実際に見る見た目の横幅と、キャンパスで描画するため内部で管理されている描画領域の横幅は全く違う概念。最終的にはスタイルシートで指定した横幅に合わせて引き伸ばされたり、縮められたりする。念のためだが、もちろん、引き伸ばされたりというのは見た目だけのことで、コンテキストの描画領域のサイズに変更があるわけではない。
横幅を変更するとリセット: 描画領域の横幅、または高さを更新した場合、それまでの描画内容が失われてしまう。100pxの時に100pxを指定する、つまり、同じサイズを新しく指定しても変更したのと同じ扱いで描画内容は失われる。キャンパスをリセットするためのハックとしても使われているとかいないとか。
デフォルトの横幅は300px: HTMLのwidth属性や、canvasオブジェクトのwidthプロパティで指定しない場合、描画領域は横幅300px、高さ150pxとなる。スタイルシートでcanvasの見た目上のサイズを決めただけで描画を始めると、思ったのとは違う図がブラウザに表示されることになる。混乱の元なので、知識として覚えておくこと。