Advanced Search

Linear Gradient with HTML 5 Canvas

/ Published in: HTML
Save to your folder(s)

Expand | Embed | Plain Text

Copy this code and paste it in your 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


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.