パスに色を塗る

canvas要素にパスを描画したら、それに色を塗ることもできます。

描画メソッド/プロパティ	内容
strokeStyle	線の色を指定
lineWidth	線の太さを指定
fillStyle	塗りつぶしの色を指定
fill()	塗りつぶしの実行

---

---

---

<canvas id="drawFillPathCanvas" onmouseover="drawFillPath();" style="border: 1px solid;" width="400" height="300">
</canvas>
<script language="javascript" type="text/javascript">
function drawFillPath() {
    var c = document.getElementById("drawFillPathCanvas");
    var context = c.getContext("2d");
    context.beginPath();
    context.moveTo(50, 100);
    context.lineTo(350, 100);
    context.lineTo(80, 250);
    context.lineTo(200, 50);
    context.lineTo(320, 250);
    context.closePath();
    context.strokeStyle = "#CACAFF";
    context.lineWidth = 8;
    context.fillStyle = "#FFCACA";
    context.fill();
    context.stroke();
}
</script>

---