How To Create Gradients Using Canvas In HTML5 ?

There Are Two Types Of Gradients-

o- createLinerGradients(x,y,x1,y1) - Create a Liner Gradient
o-  createRadialGradient(x,y,r,x1,y1,r1) - Create a Radial/Circle Gradient

Liner Gradient Using Canvas in HTML5

 

1. <html>
2. <canvas id="canvasex" width="300" height="150" style="border:2px solid #FF0000;">
3. The Liner Gradient
4. </canvas>
5. <script>
6. var i=document.getElementsById("canvasex");
7. var t=i.getContex("2D");
8.  
9. //Create Gradient
10.  
11. var grd=t.createLinerGradient(0,0,200,0);
12. grd.addColorStop(0,"yellow");
13. grd.addColorStop(1,"blue");
14.  
15. //Fill With Gradient
16.  
17. t.fillStyle=grd;
18. t .fillRect(10,10,150,80);
19. </script>
20. </html>

Circle Gradient Using Canvas in HTML5

1. <html>
2. <body>
3. <canvas id="canvasex" width="250" height="150" style="border:2px solid #FF2020;">
4. The Circle Gradients
5. </canvas>
6.  
7. var i=document.getElementById("canvasex") ;
8. var t=i.getContext("2D");
9. 
   
10. // Create Gradient
11.  
12. var grd=t.createRadialGradient(75,50,5,100,60,100);
13. grd.addColorStop(0,"Yellow");
14. grd.addColorStop(1,"blue");
15. 
    
16. //Fill with Gradient
17. 
    
18. t.fillStyle=grd;
19. t.fillRect(10,10,160,85);
20. </script>
21. </body>
22. </html>