Post
Ask Question

createLinearGradient() method in HTML5

createLinearGradient() method in HTML5 

 
In this Blog, I will take an example of a Canvas method. Basically it shows how we show a Linear gradient In Canvas, In my example it changes the color to Blue to White according to the values:
  1. <html>  
  2.     <body>  
  3.         <canvas id="MyFirstCanvas" width="150" height="150">  
  4. There is an errr that your browser does not support the HTML5 Canvas tag.</canvas>  
  5.         <script type="text/javascript">  
  6. var x=document.getElementById("MyFirstCanvas");  
  7. var mycont=x.getContext("2d");  
  8. var mygred=mycont.createLinearGradient(100,150,0,0);   
  9. mygred.addColorStop(0,"Blue");  
  10. mygred.addColorStop(1,"White");  
  11. mycont.fillStyle=mygred;  
  12. mycont.fillRect(0,40,100,150);  
  13. </script>  
  14.     </body>  
  15. </html>  
The Output Will Be:
 
1.png
Next Recommended Reading History.pushState API in HTML5