HTML canvas fill() メソッド

例

2 つの 150*100 ピクセルの矩形を描画します。1 つは赤色で塗りつぶし、もう一方は青色で塗りつぶします：

JavaScript:

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

ctx.beginPath();
ctx.rect(20, 20, 150, 100);
ctx.fillStyle = "red";
ctx.fill();

ctx.beginPath();
ctx.rect(40, 40, 150, 100);
ctx.fillStyle = "blue";
ctx.fill();

Try it Yourself ❯

ブラウザ・サポート

表中の数字は、メソッドを完全にサポートした最初のブラウザ・バージョンを指定しています。

メソッド
fill()	Yes	9.0	Yes	Yes	Yes

定義と用法

fill() メソッドは、現在の図形（パス）を塗りつぶします。デフォルトの色は黒です。

チップ: 別の色/グラデーションで塗りつぶすために、 fillStyle プロパティを使用します。

注: パスが閉じられていない場合、ill() メソッドはパスを閉じるために、（closePath() のように）パスの終点から始点に線を追加し、パスを塗りつぶします。

JavaScript 構文：	context.fill();

HTML Canvas リファレンス