Posted By

emmanuelbuah on 11/12/10


Tagged

html canvas html5


Versions (?)

Linear Gradient with HTML 5 Canvas


 / Published in: HTML
 

  1. $(document).ready(function () {
  2.  
  3. $('body').prepend('<canvas id="gradientbg" height="600" width="600" style ="height:100%;left:0;position:absolute;top:0;width:100%;"></canvas>');
  4. $('#gradientbg').height($(document).height());
  5. var canvas = $('#gradientbg').get(0);
  6.  
  7. ctx = null,
  8. grad = null,
  9. color = 255;
  10. if (canvas.getContext('2d')) {
  11. ctx = canvas.getContext('2d');
  12. ctx.clearRect(0, 0, 600, 600);
  13. ctx.save();
  14. //grad = ctx.createRadialGradient(0, 0, 0, 0, 0, 600);
  15. grad = ctx.createLinearGradient(0, 0, 0, 300);
  16. grad.addColorStop(0, '#CBEDF4');
  17. grad.addColorStop(1, ' #ffffff');
  18. ctx.fillStyle = grad;
  19. ctx.fillRect(0, 0, 600, 600);
  20. ctx.save();
  21.  
  22. }
  23.  
  24. });

Report this snippet  

You need to login to post a comment.