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