CanvasRenderingContext2D: fill() メソッド
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.
CanvasRenderingContext2D.fill() はキャンバス 2D API のメソッドで、現在のパスまたは指定されたパスを現在の fillStyle で塗りつぶします。
構文
js
fill()
fill(path)
fill(fillRule)
fill(path, fillRule)
引数
返値
なし (undefined)。
例
矩形の塗りつぶし
この例では、fill()メソッドを使用して矩形を塗りつぶします。
HTML
html
<canvas id="canvas"></canvas>
JavaScript
js
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
ctx.rect(10, 10, 150, 100);
ctx.fill();
結果
パスと fillRule を指定
この例では、交差する線を Path2D オブジェクトに保存します。その後、fill() メソッドを使用してオブジェクトをキャンバスに描画します。"evenodd" ルールを使用することで、オブジェクトの中心部に穴が未塗りつぶしのまま残されます。デフォルトで（"nonzero" ルール）、この穴も塗りつぶされます。
HTML
html
<canvas id="canvas"></canvas>
JavaScript
js
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
// パスを作成
let region = new Path2D();
region.moveTo(30, 90);
region.lineTo(110, 20);
region.lineTo(240, 130);
region.lineTo(60, 130);
region.lineTo(190, 20);
region.lineTo(270, 90);
region.closePath();
// パスを塗りつぶす
ctx.fillStyle = "green";
ctx.fill(region, "evenodd");
結果
仕様書
| Specification |
|---|
| HTML # dom-context-2d-fill-dev |
ブラウザーの互換性
関連情報
- このメソッドを定義しているインターフェイス:
CanvasRenderingContext2D CanvasRenderingContext2D.fillStyle