Javascript ChartJS-渐变颜色重叠

我有一个包含两个数据集的折线图，它们都用渐变填充。问题是渐变重叠，这会显著改变“底部”数据集的颜色

代码笔：

我的梯度及其位置：

var gradientFillPlanned = ctx.createLinearGradient(250.000, 0.000, 150.000, 500.000);
gradientFillPlanned.addColorStop(0, "rgba(128, 182, 244, 0.6)");
gradientFillPlanned.addColorStop(1, "rgba(128, 182, 244, 0.0)");

var gradientFillActual = ctx.createLinearGradient(250.000, 0.000, 150.000, 500.000);
gradientFillActual.addColorStop(0, "rgba(244, 144, 128, 0.6)");
gradientFillActual.addColorStop(1, "rgba(244, 144, 128, 0.0)");

是否有方法仅将“顶部”数据集渲染到底部数据集开始的点？像css面具之类的

---

谢谢大家!

这是由于

rgba

中的透明度，例如

0.6

。你可以试试这个

var gradientFillActual = ctx.createLinearGradient(250.0, 0.0, 150.0, 500.0);
gradientFillActual.addColorStop(0, "rgba(249,190,240, 1)");
gradientFillActual.addColorStop(1, "rgba(255,255,255, 1)");

---

这是由于

rgba

中的透明度，例如

0.6

@AswinKumar有什么办法绕过它吗？比如掩蔽？