Circular Gradient Web Page In HTML5

  1. <!DOCTYPE html>  
  2. <html>  
  3.   
  4. <body>  
  5.     <center>  
  6.         <h1> Web Page Using Circular Radient Effect<h1>    
  7.     
  8.     
  9. <canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">    
  10. Your browser does not support the HTML5 canvas tag.</canvas>    
  11.     
  12. <script>    
  13. var c = document.getElementById("myCanvas");    
  14. var ccctx = c.getContext("2d");    
  15.     
  16. // Create gradient    
  17. var grd = ctx.createRadialGradient(75,50,5,90,60,100);    
  18. grd.addColorStop(0,"red");    
  19. grd.addColorStop(1,"white");    
  20.     
  21. // Fill with gradient    
  22. ctx.fillStyle = grd;    
  23. ctx.fillRect(10,10,150,80);    
  24. </script>    
  25.     
  26. </center>    
  27. </body>    
  28. </html>