grad.js Example File

   var ctx = document.getElementById('tutorial').getContext('2d');

   // Create gradients
   var lingrad = ctx.createLinearGradient(0,0,0,150);
   lingrad.addColorStop(0, '#00ABEB');
   lingrad.addColorStop(0.5, '#fff');
   lingrad.addColorStop(0.5, '#66CC00');
   lingrad.addColorStop(1, '#fff');

   var lingrad2 = ctx.createLinearGradient(0,50,0,95);
   lingrad2.addColorStop(0.5, '#000');
   lingrad2.addColorStop(1, 'rgba(0,0,0,0)');

   // assign gradients to fill and stroke styles
   ctx.fillStyle = lingrad;
   ctx.strokeStyle = lingrad2;

   // draw shapes
   ctx.fillRect(10,10,130,130);
   ctx.strokeRect(50,50,50,50);