MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey

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 の定義		 現行の標準  

ブラウザ間の互換性

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 (有) (有) (有) (有) (有) (有) (有)

関連項目

ドキュメントのタグと貢献者

 このページの貢献者: aokashi
 最終更新者: aokashi,