HTML5 Game - Five colors in Linear gradients

  1. HOME
  2. HTML5 Game
  3. Canvas
  4. Linear Gradient

Description

Five colors in Linear gradients

Demo

ResultView the demo in separate window 

<!DOCTYPE html>
   <head>
      <title>Linear Gradients</title>

      <style>
         #canvas {/* ww w . j  av  a 2 s  . c  o  m*/
            background: #eeeeee;
            border: thin solid cornflowerblue;
         }
      </style>
   </head>

   <body>
      <canvas id='canvas' width='450' height='275'>
         Canvas not supported
      </canvas>

      <script>


let canvas = document.getElementById('canvas'),
    context = canvas.getContext('2d'),
    gradient = context.createLinearGradient(
                 0, 0, 0, canvas.height/2);

gradient.addColorStop(0, 'blue');
gradient.addColorStop(0.25, 'white');
gradient.addColorStop(0.5, 'purple');
gradient.addColorStop(0.75, 'red');
gradient.addColorStop(1, 'yellow');

context.fillStyle = gradient;
context.rect(0, 0, canvas.width, canvas.height);
context.fill();
        
      </script>
   </body>
</html>

Related Topic