CanvasRenderingContext2D: fill() メソッド

Baseline 広く利用可能

この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2015年7月以降、すべてのブラウザーで利用可能です。

CanvasRenderingContext2D.fill() はキャンバス 2D API のメソッドで、現在のパスまたは指定されたパスを現在の fillStyle で塗りつぶします。

構文

fill()
fill(path)
fill(fillRule)
fill(path, fillRule)

引数

fillRule

この点が塗りつぶし領域の内側にあるか外側にあるかを判定するアルゴリズムです。利用可能な値は次の通りです。

nonzero: 非ゼロワインディングルール。既定のルールです。
evenodd: 偶数奇数ワインディングルール。

path

塗りつぶす Path2D パス。

返値

なし (undefined)。

例

矩形の塗りつぶし

この例では、fill()メソッドを使用して矩形を塗りつぶします。

HTML

html

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

JavaScript

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

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");

結果

仕様書

仕様書
HTML # dom-context-2d-fill-dev

ブラウザーの互換性

MDN の改良に協力

協力方法を知る

このページは MDN の貢献者によって 2026年2月11日に最終更新されました。

GitHub でこのページを表示 • このコンテンツに関する問題を報告