Draw Rainbow with Linear gradient in HTML5

The following snippet shows how to fill a rectangle with the gradient color pattern. In the following we are using the Linear gradient with the seven color like as rainbow.

Linear gradient in html5

Code

<html>
<head>
  <title>Draw Rainbow with Linear gradient</title>
    <style type="text/css">
        #MyCanvas {
        border:1px solid black;
        }
    </style>
  <script type="text/javascript">
      function draw() {
          var canvas = document.getElementById("MyCanvas");
          if (canvas.getContext) {
              var ctx = canvas.getContext("2d");
              objGradient = ctx.createLinearGradient(0, 0, canvas.width, 0);
              objGradient.addColorStop(0, 'red');
              objGradient.addColorStop(1 / 6, 'orange');
              objGradient.addColorStop(2 / 6, 'yellow');
              objGradient.addColorStop(3 / 6, 'green')
              objGradient.addColorStop(4 / 6, 'blue');
              objGradient.addColorStop(5 / 6, 'Indigo');
              objGradient.addColorStop(1, 'Violet');
 
              ctx.fillStyle = objGradient;
              ctx.fillRect(0, 75, canvas.width, 50);
              ctx.fill();
          }
      }
  </script>
</head>
<body onload="draw();">
  <canvas id="MyCanvas" width="550" height="200">
  This browser or document mode doesn't support canvas object</canvas>
</body>
</html>