HTML Canvas 颜色特定区域

Question

How can I do if I want to change the color of the area on the top of the drawed line. Here is my example: https://www.w3schools.com/code/tryit.asp?filename=GG3IR6IS9TZ1

Thanks

Answer 1

Make a shape with your values and fill her. https://www.w3schools.com/code/tryit.asp?filename=GG3J6QC13SU5

// your graph
ctx.beginPath();
ctx.moveTo(0, 40);
ctx.lineTo(300, 60);
ctx.stroke();

// fillment
ctx.beginPath();
ctx.moveTo(0, 40); //y our dynamic values
ctx.lineTo(300, 60); // your dynamic values
ctx.lineTo(300, 300); // canvas bottom right end
ctx.lineTo(0, 300); // canvas bottom left end
ctx.closePath();

Pass this logic for a function for other graph use, keep your code dry.