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

     2 

     3   // Create gradients

     4   var lingrad = ctx.createLinearGradient(0,0,0,150);

     5   lingrad.addColorStop(0, '#00ABEB');

     6   lingrad.addColorStop(0.5, '#fff');

     7   lingrad.addColorStop(0.5, '#66CC00');

     8   lingrad.addColorStop(1, '#fff');

     9 

    10   var lingrad2 = ctx.createLinearGradient(0,50,0,95);

    11   lingrad2.addColorStop(0.5, '#000');

    12   lingrad2.addColorStop(1, 'rgba(0,0,0,0)');

    13 

    14   // assign gradients to fill and stroke styles

    15   ctx.fillStyle = lingrad;

    16   ctx.strokeStyle = lingrad2;

    17   

    18   // draw shapes

    19   ctx.fillRect(10,10,130,130);

    20   ctx.strokeRect(50,50,50,50);