LinearGradient is used to creates linear pattern in three ways such as horizontal, vertical and diagonal. createLinearGradient() method is used to create linear gradient object by using co-ordinates (x1,y1,x2,y2), where x1 and y1 are the intial points and x2 and y2 are the final points. The points x1 and x2 can be used to create horizontal gradient and the points y1 and y2 can be used to create vertical gradient and both points can be used to create diagonal gradient.
addcolorStop method is used create a new color stop on the gradient objectcreated by createLinearGradient method. The parameter position in addColorStop method is a number between 0.0 to 1.0 and defines the relative position of color in a gradient and color is css color values, multiple color stops can be added in gradient.
var variableName = canvas.getContext(2d);
variableName.createLinearGradient(x1,x2,y1,y2);
You can apply any number of colors to linear Gradient.
Open notepad or any other text editor, follow the following points.
save file with name task.html or task.htm and then open it using any browser and see results.