fillStyle（路徑樣式屬性）

Created: November-22, 2018

context.fillStyle=color

設定將用於填充當前路徑內部的顏色。

這些是顏色選項（必須引用這些選項）：

一個名為 color 的 CSS ，例如 context.fillStyle='red'
十六進位制顏色，例如 context.fillStyle='#FF0000'
RGB 顏色，例如 context.fillStyle='rgb(red,green,blue)'，其中紅色，綠色和藍色是整數 0-255，表示每種成分顏色的強度。
HSL 顏色，例如 context.fillStyle='hsl(hue,saturation,lightness)'，其中色調是色輪上的整數 0-360，飽和度和亮度是指示每個組分強度的百分比（0-100％）。
HSLA 顏色，例如 context.fillStyle='hsl(hue,saturation,lightness,alpha)'，其中色調是色輪上的整數 0-360，飽和度和亮度是指示每個分量的強度的百分比（0-100％），並且α是表示不透明度的小數值 0.00-1.00。

你還可以指定這些顏色選項（這些選項是由上下文建立的物件）：

線性漸變，是使用 context.createLinearGradient 建立的線性漸變物件
徑向漸變，是使用 context.createRadialGradient 建立的徑向漸變物件
模式是使用 context.createPattern 建立的模式物件

StackOverflow 文件

<!doctype html>
<html>
<head>
<style>
    body{ background-color:white; }
    #canvas{border:1px solid red; }
</style>
<script>
window.onload=(function(){

    // canvas related variables
    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");

    // stroke using a CSS color: named, RGB, HSL, etc
    ctx.fillStyle='red';
    ctx.fillRect(50,50,100,50);

    // stroke using a linear gradient
    var gradient = ctx.createLinearGradient(225,50,300,50);
    gradient.addColorStop(0,'red');
    gradient.addColorStop(1,'green');
    ctx.fillStyle=gradient;
    ctx.fillRect(200,50,100,50);

    // stroke using a radial gradient
    var gradient = ctx.createRadialGradient(100,175,5,100,175,30);
    gradient.addColorStop(0,'red');
    gradient.addColorStop(1,'green');
    ctx.fillStyle=gradient;
    ctx.fillRect(50,150,100,50);

    // stroke using a pattern
    var patternImage=new Image();
    patternImage.onload=function(){
        var pattern = ctx.createPattern(patternImage,'repeat');
        ctx.fillStyle=pattern;
        ctx.fillRect(200,150,100,50);
    }
    patternImage.src='http://i.stack.imgur.com/ixrWe.png';

    // for demo only, draw labels by each stroke
    ctx.fillStyle='black';
    ctx.textAlign='center';
    ctx.textBaseline='middle';
    ctx.font='14px arial';
    ctx.fillText('CSS color',100,40);
    ctx.fillText('Linear Gradient color',250,40);
    ctx.fillText('Radial Gradient color',100,140);
    ctx.fillText('Pattern color',250,140);

}); // end window.onload
</script>
</head>
<body>
    <canvas id="canvas" width=350 height=250></canvas>
</body>
</html>