canvas in html5 Gradients

canvas in html5 Gradients

canvas in html5 Gradients can be used to fill rectangle , circle , text , lines etc.

There are two different types of  gradients:

• create linear gradient(x,y,x1,y1)-creates a linear gradient
• create radial gradient(x,y,r,x1,y1,r1)-creates a radial/circular gradient

---

Create Linear gradient

The following code shows how to use linear gradient:

Here in canvas in html5 ,the addcolorstop method specifies the color and its position.Gradient position can be anywhere between 0 to 1.

To use gradient set the fillstyle and strokestyle property to gradient and then draw shape.

---

Create Radial Gradient

The following code shows how to use radial gradient:

---

• canvas in html5 Coordinates