ブログでHTML5 Canvas パスの線

太さ変更

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

context.lineWidth

このプロパティは、線の太さを司ります。

---

パスストロークの色

<canvas id="drawColoredLineSegmentCanvas" width="300" height="200"></canvas>
<script>
    (function() {
        var canvas = document.getElementById("drawColoredLineSegmentCanvas");
        var context = canvas.getContext("2d");
        context.strokeStyle = "rgb(0, 0, 255)";
        context.beginPath();
        context.moveTo(0, 0);
        context.lineTo(300, 200);
        context.stroke();
    })();
</script>

context.strokeStyleプロパティは、パスのストロークを描くときのスタイルを司ります。
つまり線の描き方を決めるのです。
使えるスタイルはfillStyleプロパティと同じです。