score:1

Accepted answer

it looks like you are setting the wrong start and end coordinates when you create the linear gradient.

this documentation may help you understand better what the coordinates should be set to: https://developer.mozilla.org/en-us/docs/web/api/canvasrenderingcontext2d/createlineargradient

change both x coordinates to 0, to get straight horizontal lines. then, decrease the start y and increase the end y to make the start and end colors more visible.

code:

grd = ctx.createlineargradient(0.000, 350.000, 0.000, 100.000);

screenshot: gradient

jsfiddle:
https://jsfiddle.net/xg2k82rp/3/


Related Query

More Query from same tag