Canvas How to - Draw gradients on a canvas

Question

We would like to know how to draw gradients on a canvas.
Answer


<!DOCTYPE HTML>
<html> 
<head>
<script> 
window.onload = function()<!--from   w  ww .j  a v  a 2  s  . co  m-->
{ 
   canvas  = document.getElementById("canvasArea"); 
   context = canvas.getContext("2d");
   var xPos   = 20;   
   var yPos   = 20;   
   var gap = 20;
   var width  = 80;   
   var height = 80;

   context.shadowOffsetX = 4;
   context.shadowOffsetY = 4;
   context.shadowBlur    = 3;
   context.shadowColor   = "gray";
   context.lineWidth     = 4;

   var gradLH = context.createLinearGradient(20, 0, 100, 0  );
   var gradLV = context.createLinearGradient(0,  0, 0,   100);

   var gradLD = context.createLinearGradient(
                   xPos+(2*width)+(2*gap), 
                   yPos, 
                   xPos+220+width, 
                   yPos+height);

   var gradRC = context.createRadialGradient(
                   xPos+(3*width)+(3*gap)+(width/2), 
                   yPos+(height/2), 
                   5, 
                   xPos+(3*width)+(3*gap)+(width/2),
                   yPos+(height/2),
                   50);

   var gradRO = context.createRadialGradient(
                   xPos+(4*width)+(4*gap)+(width/4), 
                   yPos+(height/2), 
                   15, 
                   xPos+(4*width)+(4*gap)+(width/2),
                   yPos+(height/2),
                   40);
   gradLH.addColorStop( 0, "deeppink"    );
   gradLH.addColorStop(.3, "orange"      );
   gradLH.addColorStop(.6, "lime"        );
   gradLH.addColorStop( 1, "yellow"      );
   gradLV.addColorStop( 0, "red"         );
   gradLV.addColorStop(.4, "blueviolet"  );
   gradLV.addColorStop( 1, "gold"        );
   gradLD.addColorStop( 0, "fuchsia"     );
   gradLD.addColorStop(.5, "orange"      );
   gradLD.addColorStop( 1, "springgreen" );
   gradRC.addColorStop( 0, "red"         );
   gradRC.addColorStop(.5, "turquoise"   );
   gradRC.addColorStop( 1, "olive"       );
   gradRO.addColorStop( 0, "yellow"      );
   gradRO.addColorStop(.7, "magenta"     );
   gradRO.addColorStop( 1, "limegreen"   );

   // A9. LINEAR gradients.
   context.fillStyle =   gradLH;
   context.fillRect(xPos+(0*width)+(0*gap), yPos, width, height); 
   context.fillStyle =   gradLV;
   context.fillRect(xPos+(1*width)+(1*gap), yPos, width, height); 
   context.fillStyle =   gradLD;
   context.fillRect(xPos+(2*width)+(2*gap), yPos, width, height); 
   context.strokeStyle = gradLD;
   context.beginPath();
   context.moveTo(xPos, yPos+height+gap);
   context.lineTo(xPos+(5*width)+(4*gap), yPos+height+gap);
   context.stroke();

   // A10. RADIAL gradients.
   context.fillStyle =   gradRC;
   context.fillRect(xPos+(3*width)+(3*gap), yPos, width, height);
   context.fillStyle =   gradRO;
   context.fillRect(xPos+(4*width)+(4*gap), yPos, width, height);           
}
</script> 
</head> 
<body> 
<div    style  = "width:525px;   height:150px; 
                  margin:0 auto; padding:5px;">
<canvas id     = "canvasArea" 
        width  = "525"  height = "150" 
        style  = "border:2px solid black">
</canvas> 
</div> 
</body> 
</html>
The code above is rendered as follows: