如何在画布上限制线性渐变中的模糊？

// 创建画布
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");

// 设置画布大小
canvas.width = 400;
canvas.height = 200;

// 创建线性渐变对象
var gradient = ctx.createLinearGradient(0, 0, canvas.width, 0);

// 添加颜色停止点
gradient.addColorStop(0, "red");
gradient.addColorStop(0.5, "green");
gradient.addColorStop(1, "blue");

// 开始绘制路径
ctx.beginPath();

// 定义路径的起始点和结束点
ctx.moveTo(0, 0);
ctx.lineTo(canvas.width, 0);
ctx.lineTo(canvas.width, canvas.height);
ctx.lineTo(0, canvas.height);
ctx.closePath();

// 剪切路径
ctx.clip();

// 设置渐变样式
ctx.fillStyle = gradient;

// 填充路径
ctx.fill();