Example of a linear gradient using the fillStyle and strokeStyle:

Source Code: (back to article)

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      canvas {
        border: 5px solid #cccccc;
      }
    </style>
    <script>
      function drawShape() {
        var canvas = document.getElementById('canvasGradient');
        if (canvas.getContext) {
          var ctx = canvas.getContext('2d');
          var lgrad1 = ctx.createLinearGradient(0, 0, 0, 300);
          lgrad1.addColorStop(0, 'blue');
          lgrad1.addColorStop(0.4, 'lightpink');
          lgrad1.addColorStop(0.5, 'purple');
          lgrad1.addColorStop(1, 'lightsalmon');
          var lgrad2 = ctx.createLinearGradient(0, 50, 0, 150);
          lgrad2.addColorStop(0, '#7afff3');
          lgrad2.addColorStop(0.5, '#191918');
          lgrad2.addColorStop(1, '#7afff3');
          ctx.fillStyle = lgrad1;
          ctx.strokeStyle = lgrad2;
          ctx.fillRect(15, 15, 120, 120);
          ctx.strokeRect(100, 50, 100, 50);
        } else {
          alert('Your browser does not support');
        }
      }
    </script>
  </head>
  <body onload="drawShape();">
    <canvas id="canvasGradient"></canvas>
  </body>
</html>