構文

context . fillStyle [ = value ]

塗りつぶし形状向けに使われる現在のスタイルを返します。

値をセットして、塗りつぶしスタイルを変更することができます。Can be set, to change the fill style.

スタイルには、CSSカラーを含んだ文字列か、または、CanvasGradient や CanvasPattern オブジェクトを指定することができます。不正な値は無視されます。

仕様

strokeStyle 属性は形状の輪郭に使う色やスタイルを表します。また、fillStyle 属性は形状内に使う色やスタイルを表します。

これらの属性はいずれも、文字列、CanvasGradient オブジェクト、CanvasPattern オブジェクトのいずれかとなります。設定する際には、文字列を指定した場合は、CSS <color> 値として構文解析され、色が割り当てられなければいけません。CanvasGradient オブジェクトと CanvasPattern オブジェクトでは、それら自身に色が割り当てられなければいけません。[CSSCOLOR] もし文字列が指定されたにも関わらず、それが適切な色を指すものでなければ、また、文字列でない場合、それが、CanvasGradient オブジェクトや CanvasPattern オブジェクトでなければ、無視され、その属性は以前の値を保持したままとしなければいけません。

取得する際には、値が色であれば、その色のシリアライゼーションが返されなければいけません。それが色ではなく、CanvasGradient や CanvasPattern なら、それぞれのオブジェクトが返されなければいけません。（このようなオブジェクトは opaque です。そのため、別の属性への割当や、別のグレデーションやパターンとの比較にしか使うことができません。）

カラー値に対する色のシリアライゼーションは文字列となり、次のように算出されます：アルファが1.0なら小文字6桁の値に先頭に "#" 文字 (U+0023 NUMBER SIGN) をつけた値として得られます。最初の2桁は赤コンポーネントを、次の2桁は緑コンポーネントを、最後の2桁は青コンポーネントを表し、その桁は 0-9 a-f (U+0030 to U+0039 and U+0061 to U+0066) の範囲となります。もしアルファが1.0未満で、その文字列が CSS の rgba() 関数表記形式のカラー値なら：文字列 rgba (U+0072 U+0067 U+0062 U+0061) の後ろに、U+0028 LEFT PARENTHESIS、赤コンポーネントを表す0-255の範囲の10進数整数 (using digits 0-9, U+0030 to U+0039, in the shortest form possible)、リテラル U+002C COMMA、U+0020 SPACE、緑コンポーネント用の整数、カンマ、スペース、青コンポーネント用の整数、さらに、カンマ、スペース、U+0030 DIGIT ZERO、U+002E FULL STOP（小数点を表す）、アルファ値を表す小数点以下を表す 1 桁以上の 0-9 (U+0030 to U+0039)の範囲の数字、最後にU+0029 RIGHT PARENTHESISが続きます。

コンテキストが生成されると、strokeStyle 属性と fillStyle 属性が、文字列 #000000 で初期化されなければいけません。

原文：http://www.w3.org/TR/2010/WD-2dcontext-20100624/#dom-context-2d-fillstyle

サンプル

『色を指定する』をご覧ください。

ブラウザ対応状況