Javascript 有没有一种方法可以用Canvas将方程的图转换成不等式的图？

我有一些代码在坐标平面上绘制一个图的方程。（关于包含代码的JSFIDLE链接，请参见下面的注释。）我正在试图找到一种方法，使区域“小于”方程式，这样就不用绘制y=[方程式]，而是绘制y<[方程式]。似乎可以使用画布中的“type:area”对单个数据点执行此操作，但我想知道这是否可以应用于方程的绘图。我将非常感谢任何人能提供的任何帮助。谢谢

var x_轴=200；
变量y_轴=200；
变量x_max=7；//这会改变X轴的范围
变量y_max=7；//这会改变Y轴的范围
变量x_标度=x_轴/（x_最大值+1）；
变量y_比例=y_轴/（y_最大值+1）；
变量x_偏移=x_轴+0.5；//画布上的位置
变量y_偏移=y_轴+0.5；//图的原点
var canvas=document.getElementById（“轴”）；
if（canvas.getContext）{
canvas.width=x_轴*2；
canvas.height=y_轴*2；
var ctx=canvas.getContext（“2d”）；
牵引轴（ctx）；
}
功能牵引轴（ctx）{
ctx.font=“20px”；
ctx.font=“14px”；
strokeText（'Y'，x_轴-25,10）；//更改Y轴的标签
ctx.strokeText（'X'，X_轴*2-10，y_轴+20）；//更改X轴的标签
ctx.font=“12px无衬线”；
ctx.lineWidth=1；
//画x轴
ctx.beginPath（）；
ctx.moveTo（0，y_偏移）；
ctx.lineTo（x_轴*2，y_偏移）；
ctx.stroke（）；
ctx.closePath（）；
//拔箭
ctx.beginPath（）；
ctx.moveTo（x_轴*2+0.5，y_轴+0.5）；
ctx.lineTo（x_轴*2+0.5-8，y_轴+0.5-3）；
ctx.lineTo（x_轴*2+0.5-8，y_轴+0.5+3）；
ctx.stroke（）；
ctx.closePath（）；
ctx.fill（）；
//绘制x值
j=-x_max；
while（j）您可以使用
context.getImageData
获取并操作画布上的每个[x，y]像素。根据您的等式测试每个像素的[x，y]。要绘制小于：如果像素等于等式，则将其不透明度设置为255（255==100%）。如果像素小于等式，则将其不透明度设置为64（64~=25%）。否则将像素保持透明。使用
context.putImageData
将修改后的像素渲染回画布。