如何使用ctx html填充线条中的颜色？

var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');

ctx.beginPath();
ctx.moveTo(x1, y1); // 设置线条起点坐标
ctx.lineTo(x2, y2); // 设置线条终点坐标
ctx.lineWidth = lineWidth; // 设置线条宽度
ctx.strokeStyle = 'black'; // 设置线条颜色
ctx.stroke(); // 绘制线条

ctx.beginPath();
ctx.moveTo(x1, y1); // 设置线条起点坐标
ctx.lineTo(x2, y2); // 设置线条终点坐标
ctx.lineWidth = lineWidth; // 设置线条宽度
ctx.strokeStyle = 'black'; // 设置线条颜色
ctx.stroke(); // 绘制线条

ctx.beginPath();
ctx.moveTo(x1, y1); // 设置填充起点坐标
ctx.lineTo(x2, y2); // 设置填充终点坐标
ctx.lineTo(x3, y3); // 设置填充终点坐标
ctx.closePath(); // 封闭路径
ctx.fillStyle = 'red'; // 设置填充颜色
ctx.fill(); // 填充路径