Canvas.height - キャンパスの高さを取得、変更する

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

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

横幅(widthプロパティ)と同じルールがあります。まずスタイルシートで指定するcanvas要素の見た目の高さと、heightプロパティで指定する描画領域の高さは別物だということです。仮にスタイルシートで500px、プロパティで100pxを指定した場合、ブラウザに表示される際に5倍の大きさに図が引き伸ばされます。ブラウザに表示される時は、スタイルシートで指定したサイズに辻褄が合うように拡大、縮小されることを意識しておきましょう。

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

サンプルコード

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

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

// キャンパスの描画領域の高さを500pxに変更する
canvas.height = 500 ;

// キャンパスの描画領域の高さを取得
var height = canvas.height ;

デモ

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

RUN
HTML
CSS
JavaScript

<p>スタイルシートでは<code>200x200</code>、プロパティでは<code>200x100</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 = 200 ; canvas.height = 100 ; // 矩型を作成する context.rect( 0, 0, 50, 50 ) ; // 塗りつぶしの色を指定する context.fillStyle = "#D36015" ; // 塗りつぶす context.fill() ; } ) ; // クリックイベント2 document.getElementById( "method2" ).addEventListener( "click", function() { // キャンパスの描画領域を変更する canvas.width = 200 ; canvas.height = 100 ; } ) ; // リセット document.getElementById( "method3" ).addEventListener( "click", function() { // 二次元グラフィックスのコンテキストを取得 var context = canvas.getContext( "2d" ) ; // キャンパスをクリアーする context.clearRect( 0, 0, 200, 200 ) ; } ) ;

構文

height = canvas.height ;
canvas.height = newHeight ;

引数

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

戻り値

項目	説明
height	現在のcanvasの描画領域の高さを取得する。

ノート

サポート状況: 主要な全てのブラウザがサポートしている。Ie8以下はcanvas自体に対応していない。
2種類の高さがある: ブラウザでユーザーが実際に見る見た目の高さと、キャンパスで描画するため内部で管理されている描画領域の高さは別物であり、分けて考えないといけない。ブラウザの表示では、スタイルシートで指定した高さに合わせて強制的に拡大、縮小される。当然、ここでいう拡大、縮小は見た目のことであり描画領域のサイズ自体に変更があるわけではない。
高さを変更するとリセット: 描画領域の横幅、または高さを更新した場合、それまでの描画内容が失われてしまう。100pxの時に100pxを指定する、つまり、同じサイズを新しく指定しても変更したのと同じ扱いで描画内容は失われる。
デフォルトの高さは150px: 明示的にwidthやheightを指定しないと混乱の元となるが、描画領域のデフォルト値は横幅が300px、高さが150pxである。スタイルシートでcanvas要素の見た目のサイズだけを決めて描画を始めると、想定外のアスペクト比となることがある。