HTML <canvas> width 属性

HTML <canvas> タグ

定義と使用方法

width 属性は <canvas> 要素の幅をピクセル単位で指定します。

ヒント

以下を使用してください height 属性 ピクセル単位で <canvas> 要素の高さを指定してください。

キャンバスの高さや幅をリセットするたびに、キャンバスの内容がクリアされます（ページ下部の例を参照してください）。

私たちの HTML Canvas チュートリアル で <canvas> 要素に関する知識をさらに学んでください。

インスタンス

例 1

高さと幅がそれぞれ 200ピクセルの <canvas> 要素：

<canvas id="myCanvas" width="400" height="400" style="border:1px solid">

実際に試してみる

例 2

width 属性を 400px に設定することでキャンバスをクリアします（JavaScriptを使用して）：

<canvas id="myCanvas" width="200" height="200" style="border:1px solid"></canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "#0192B9";
ctx.fillRect(50, 50, 300, 300);
function clearCanvas() {
  c.width = 400;
}
</script>

実際に試してみる

構文

<canvas width="ピクセル">

属性値

値 説明
ピクセル キャンバスの幅をピクセルで指定します（例：“100”）。デフォルト値は 300 です。

ブラウザのサポート

このテーブルの数字は、この属性を完全にサポートする最初のブラウザのバージョンを示しています。

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 2.0 3.1 9.0

HTML <canvas> タグ