CanvasRenderingContext2D.rect()

Canvas 2D APIのCanvasRenderingContext2D.rect() メソッドは、2Dウィンドウのサイズ(width, height)や開始位置(x, y)を定義できるメソッドです。

ウィンドウのサイズと開始位置をもとに直線で引かれたウィンドウが2Dウィンドウになり、fillメソッドでウィンドウ内の塗りつぶしをしたり、strokeメソッドでウィンドウの外周を直線で囲み、可視化することなどできます。

構文

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

パラメーター

x

2Dウィンドウの開始位置(x軸)

y

2Dウィンドウの開始位置(y軸)

width

2Dウィンドウの幅

height

2Dウィンドウの高さ

例

 rect メソッドの使用方法

この例は、 rect メソッドを使用してウィンドウの作成をするシンプルなコードです。
内容は、canvas内に作成したウィンドウに対して、fill() を実行し、ウィンドウ内を黒塗りにしているだけになります。
上に記載してあるウィンドウを黒塗りする fill() 以外にも、

などが存在しているので、参考にしてみてください。

HTML

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

JavaScript

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.rect(10, 10, 100, 100);
ctx.fill();

下のコードを変更してみよう:

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.rect(10, 10, 100, 100);
ctx.fill();</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);

仕様書

仕様書 ステータス 備考
HTML Living Standard
CanvasRenderingContext2D.rect の定義		 現行の標準  

ブラウザー実装状況

BCD tables only load in the browser

関連情報