|  | Home · All Classes · All Functions · Overviews

# grad.js Example File
script/context2d/scripts/grad.js

       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);