HTML5 Game - Create Linear Gradients

Introduction

Both fillStyle and strokeStyle accept gradient colors in the form of a CanvasGradient object.

There are two types of gradient: linear and radial.

Each type of gradient is created using its own method in the 2d rendering context.

For a linear gradient, you use createLinearGradient.

For a radial gradient you use createRadialGradient.

Both of these methods return a CanvasGradient object.

Then you can call addColorStop method of the CanvasGradient object to append colors.

The following code creates a basic linear gradient to see how this all fits together.

Demo

ResultView the demo in separate window

<!DOCTYPE html>

<html>
  <head>
    <title>Pushing canvas further</title>
    <meta charset="utf-8">
    /*from  w  w  w  . j a v  a 2  s .c o m*/
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    
    <script type="text/javascript">
      $(document).ready(function() {  
        let canvas = $("#myCanvas");
        let context = canvas.get(0).getContext("2d");
        
    let gradient = context.createLinearGradient(0, 0, 0, canvas.height());  
    gradient.addColorStop(0, "rgb(0, 0, 0)");  
    gradient.addColorStop(1, "rgb(255, 255, 255)");  
      
    context.fillStyle = gradient;  
    context.fillRect(0, 0, canvas.width(), canvas.height());  
        
      });
    </script>
  </head>
  
  <body>
    <canvas id="myCanvas" width="500" height="500">
      <!-- Insert fallback content here -->
    </canvas>
  </body>
</html>

HTML5 Game - Create Linear Gradients

Introduction

Demo

Related Topic