The Basics of Using Canvas
Creating a canvas context on your page is as simple as adding the <canvas> element to your HTML document:
context.createLinearGradient(startX, startY,endX, endY)
The createLinearGradient creates a linear gradient. The gradient is created by two pairs of coordinates from (startX, startY) to (endX, endY). Set your specified gradient to the fillStyle, etc.
offset - an offset in the range [0.0 to 1.0]
Color - Color the color
context.fillRect(setX, sety, width, height)
You need to provide the (x,y) coordinates, followed by the width and height dimensions.
The createRadialGradient creates a radial gradient. The gradient is created by two pairs of coordinates from (startX,startY) to (endX,endY). This is just a circular, so specify the radius for the start circle and the end one. Set your specified gradient to the fillStyle, etc.