如何在javascript画布中填充渐变色曲线梯形区域？

Question

我有一张图表，我需要用图表线下的区域填充颜色。

可以说我可以使用多边形方法。因此，我可以使用moveTo和lineTo以及ctx.fill()将图表线下的曲线梯形区域分解为多边形。

但这种方法有两个缺点：

1）表现。每次绘制图表时，我都需要单独创建和处理每个多边形。经常这样。

2）我无法使用公共渐变填充图表行下的整个部分。但这正是我所需要的。

所以，我正在搜索将要执行的功能：

1）获取所有可见的图表顶点（可以从图表的数据数组中提取）

2）根据图表线下的当前像素y坐标

计算颜色（例如alpha分量）

3）在图表行下填充相应颜色的像素。

我不能在我的情况下使用webgl。只是常规画布2d上下文。

我明白，也许我问的太多了。但我希望我不是第一个遇到同样问题的人。

修改

我需要得到这样的东西：