CanvasRenderingContext2D.fillRect()

CanvasRenderingContext2D.fillRect() は座標 (x, y) を始点に、大きさ(width, height) の領域を塗りつぶします。塗りつぶす様式は fillStyle 属性に従います。

文法

void ctx.fillRect(x, y, width, height);

Parameters

x: 矩形領域の始点のうち、X座標を指定します。
y: 矩形領域の始点のうち、Y座標を指定します。
width: 矩形領域の横幅を指定します。
height: 矩形領域の高さを指定します。

使用例

`fillRect` の使い方

fillRect メソッドを利用した簡単な使用例です。

HTML

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

JavaScript

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.fillStyle = 'green';
ctx.fillRect(10, 10, 100, 100);

// キャンバス全体を塗りつぶすには、以下のようにします。
// ctx.fillRect(0, 0, canvas.width, canvas.height);

以下のコードを編集して、変更がどのように適用されるか試してみてください。

Playable code

<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
<div class="playable-buttons">
  <input id="edit" type="button" value="Edit" />
  <input id="reset" type="button" value="Reset" />
</div>
<textarea id="code" class="playable-code">
ctx.fillStyle = "green";
ctx.fillRect(10, 10, 100, 100);</textarea>

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var textarea = document.getElementById("code");
var reset = document.getElementById("reset");
var edit = document.getElementById("edit");
var code = textarea.value;

function drawCanvas() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  eval(textarea.value);
}

reset.addEventListener("click", function() {
  textarea.value = code;
  drawCanvas();
});

edit.addEventListener("click", function() {
  textarea.focus();
})

textarea.addEventListener("input", drawCanvas);
window.addEventListener("load", drawCanvas);

仕様

Specification	Status	Comment
HTML Living Standard CanvasRenderingContext2D.fillRect の定義	現行の標準

ブラウザ間の互換性

現在、互換性データを可読形式の JSON フォーマットに置き換えているところです。 この互換性一覧は古い形式を使っており、これに含まれるデータの置き換えが済んでいません。 手助けしていただける場合は、こちらから！

デスクトップ
モバイル

Feature	Chrome	Edge	Firefox (Gecko)	Internet Explorer	Opera	Safari
Basic support	(有)	(有)	(有)	(有)	(有)	(有)

Feature	Android	Chrome for Android	Edge	Firefox Mobile (Gecko)	IE Mobile	Opera Mobile	Safari Mobile
Basic support	(有)	(有)	(有)	(有)	(有)	(有)	(有)