如何创建不同颜色的Bezier路径？

// 创建Canvas元素
var canvas = document.createElement('canvas');
document.body.appendChild(canvas);

// 获取上下文对象
var ctx = canvas.getContext('2d');

// 设置Canvas的宽度和高度
canvas.width = 500;
canvas.height = 500;

// 创建第一个红色的Bezier路径
ctx.beginPath();
ctx.moveTo(100, 100);
ctx.bezierCurveTo(150, 50, 250, 150, 300, 100);
ctx.strokeStyle = 'red';
ctx.stroke();

// 创建第二个蓝色的Bezier路径
ctx.beginPath();
ctx.moveTo(100, 200);
ctx.bezierCurveTo(150, 150, 250, 250, 300, 200);
ctx.strokeStyle = 'blue';
ctx.stroke();

// 创建第三个绿色的Bezier路径
ctx.beginPath();
ctx.moveTo(100, 300);
ctx.bezierCurveTo(150, 250, 250, 350, 300, 300);
ctx.strokeStyle = 'green';
ctx.stroke();