Creation Of Web Page Using Gradient Linear Effect In HTML5

  1. <!DOCTYPE html>  
  2. <html>  
  3.   
  4. <body>  
  5.     <h1>Gradient Linear Effect in Webpage</h1> <canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">    
  6. Your browser does not support the HTML5 canvas tag.</canvas>  
  7.     <script>  
  8.         var c = document.getElementById("myCanvas");  
  9.         var ccctx = c.getContext("2d");  
  10.         // Create gradient    
  11.         var grd = ctx.createLinearGradient(0, 0, 200, 0);  
  12.         grd.addColorStop(0, "red");  
  13.         grd.addColorStop(1, "white");  
  14.         // Fill with gradient    
  15.         ctx.fillStyle = grd;  
  16.         ctx.fillRect(10, 10, 150, 80);  
  17.     </script>  
  18. </body>  
  19.   
  20. </html>