HTML5 Game - Creating a radial gradient and a linear gradient on a canvas

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

Description

Creating a radial gradient and a linear gradient on a canvas

Demo

ResultView the demo in separate window 

<!DOCTYPE HTML>
<html lang = "en">
<head>
  <script type = "text/javascript">
    function draw(){/*from  w w w  .  j  ava 2s .co m*/
      let drawing = document.getElementById("drawing");
      let con = drawing.getContext("2d");
      
      //build a linear gradient
      lGrad = con.createLinearGradient(0,0,100,200);

      lGrad.addColorStop(0, "#FF0000");
      lGrad.addColorStop(.5, "#00FF00");
      lGrad.addColorStop(1, "#0000FF");
      
      con.fillStyle = lGrad;
      con.fillRect(0, 0, 100, 200);

      //build a radial gradient
      rGrad = con.createRadialGradient(150, 100, 0, 150, 100, 100);
      rGrad.addColorStop(0, "#FF0000");
      rGrad.addColorStop(.5, "#00FF00");
      rGrad.addColorStop(1, "#0000FF");

      con.fillStyle = rGrad;
      con.fillRect(100,0, 200, 200);
    }
  </script>
</head>

<body onload = "draw()">
  <h1>Gradients</h1>
  <canvas id = "drawing"
    height = "200"
    width = "200">
    <p>Canvas not supported!</p>
  </canvas>
    
</body>
</html>

Related Topic