HTML5 Game - Five colors in Radial gradients

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

Description

Five colors in Radial gradients

Demo

ResultView the demo in separate window 

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

      <style>
         #canvas {//from w w w.j a va 2  s.c om
            background: #eeeeee;
            border: thin solid cornflowerblue;
         }
      </style>
   </head>

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

         <script>

let canvas = document.getElementById('canvas'),
    context = canvas.getContext('2d'),
    gradient = context.createRadialGradient(
                 canvas.width/2, canvas.height, 10,
                 canvas.width/2, 0, 100);

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>
      </div>
   </body>
</html>

Related Topic