fillRect(x, y, w, h) メソッドは、塗りつぶしの四角形を描く際に使用します。beginPath()・ moveTo(x, y)・ lineTo(x, y)・ fill() メソッドなどを使用してパスで描く方法もありますが、fillRect() を使用すると、より簡単に塗りつぶしの四角形を描くことができます。
引数 (x, y) は、四角形の左上の座標です。Canvas における座標は、<canvas> 要素の左上端からの距離で指定します。引数 w と h は、四角形の幅と高さです。これらの引数を指定することで、 左上が (x, y)、右上が (x+w, y)、右下が(x+w, y+h)、左下が(x, y+h) の塗りつぶしの四角形が描かれます。
幅と高さのいずれかが 0 の場合には何も描画されません。
四角形の塗りつぶしには現在の塗りスタイルが適用されます。塗りスタイルは、fillStyle 属性で指定します。
canvas 要素の描画サンプル
HTML source
<canvas id="myCanvas" style="background-color:#a19600;"></canvas>
JavaScript source
onload = function draw() {
const canvas = document.getElementById('myCanvas');
const context = canvas.getContext('2d');
context.fillStyle = "rgb(0, 110, 170)";
context.fillRect(25, 25, 100, 100);
};