fill() メソッド

構文

fill() メソッドは、現在のパスにある各サブパスを fillStyle を使って塗りつぶさなければいけません。塗りつぶす際に、非ゼロ巻数規則を適用します。サブパスが開いている場合は、塗りつぶすときに、暗黙に閉じられなければいけません。（実際のサブパスには影響を与えません。）。

ゆえに、重なり合っているけれども、それぞれ独立したパスが 2 つあるとき、それらが、反対の巻き数を持つなら、それらは打ち消し合うことになり、何も塗りつぶさない結果となります。それらが、同じ巻き数を持つなら、その領域をもう一度描画するだけとなります。

このサンプルでは、lineTo() メソッドを使って三角形のパスを生成し、fill() メソッドを使って、その三角形を塗りつぶしています。

/* 三角形を描く */
ctx.beginPath();
ctx.moveTo(50, 10);
ctx.lineTo(90, 90);
ctx.lineTo(10, 90);
ctx.closePath();
/* 三角形を塗りつぶす */
ctx.fill();

Firefox	Safari	Chrome	Opera	IE	ExplorerCanvas
2 ○	2 ○	1 ○	9.2 ○	9 ○	0002 ○
3 ○	3 ○	2 ○	9.5 ○		3 ○
3.5 ○	4 ○	3 ○	10 ○
3.6 ○	5 ○	6 ○	10.60 ○