ブログでHTML5 Canvas パスを塗りつぶす

塗りつぶす
塗りつぶすこともできます。

<canvas id="drawFilledTriangleCanvas" width="300" height="200"></canvas>
<script>
    (function() {
        var canvas = document.getElementById("drawFilledTriangleCanvas");
        var context = canvas.getContext("2d");
        context.beginPath();
        context.moveTo(150, 0);
        context.lineTo(300, 200);
        context.lineTo(0, 200);
        context.lineTo(150, 0);
        context.fill();
    })();
</script>

context.fill();

は、現在のパスを使って塗りつぶします。
デフォルトの色は黒です。
fillStyleプロパティを使うと塗りつぶすスタイルを、別の色やグラディエントなどに変更できます。
もしパスが閉じていなければ無理やり閉じて塗りつぶします。