HTML | canvas createLinearGradient() Method

The HTML Canvas createLinearGradient() method is used to create a linear gradient object.
The gradient can be used to fill different colors in rectangles, circles, lines, text, etc. We can then assign the gradient color to the strokeStyle or fillStyle properties to fill or draw shapes such as rectangles, circles, lines, text, etc.
The addColorStop() method adds the different colors, and position the colors in the gradient object.

Syntax::

context.createLinearGradient(x0, y0, x1, y1);

Parameters::

x0: This parameter indicates the x-coordinate of the start point of the gradient.
y0: This parameter indicates the y-coordinate of the start point of the gradient.
x1: This parameter indicates the x-coordinate of the end point of the gradient.
y1: This parameter indicates the y-coordinate of the end point of the gradient.

Example 1:

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
      HTML canvas  
      createLinearGradient() Method 
  </title> 
</head> 
  
<body> 
    <center> 
        <h1 style="color:green"> 
          GeeksforGeeks 
      </h1> 
        <h2> 
          HTML canvas  
          createLinearGradient() Method 
      </h2> 
        <canvas id="myCanvas" 
                width="350"
                height="180"> 
        </canvas> 
        <script> 
            var a = document.getElementById( 
              "myCanvas"); 
            var gctx = a.getContext("2d"); 
            var clg = 
                gctx.createLinearGradient( 
                  100, 150, 200, 120); 
            
            clg.addColorStop(0, "yellow"); 
            clg.addColorStop(1, "pink"); 
            gctx.fillStyle = clg; 
            gctx.fillRect(80, 20, 200, 110); 
        </script> 
    </center> 
</body> 
  
</html> 

Output:

Example 2:

<!DOCTYPE HTML> 
  
<html> 
  
<head> 
    <title> 
        HTML canvas createLinearGradient() Method 
    </title> 
</head> 
  
<body> 
    <center> 
        <h1 style="color:green"> 
          GeeksforGeeks 
      </h1> 
        <h2> 
          HTML canvas  
          createLinearGradient() Method 
      </h2> 
        <canvas id="mycanvas"></canvas> 
        <script> 
            var canvas = document.getElementById('mycanvas'); 
  
            var ctx = canvas.getContext('2d'); 
  
            var lingrad = ctx.createLinearGradient(0, 0, 0, 150); 
  
            lingrad.addColorStop(0, '#00AB3B'); 
            lingrad.addColorStop(0.5, '#45ec3f'); 
  
            lingrad.addColorStop(0.5, '#66CC20'); 
            lingrad.addColorStop(1, '#f3f'); 
  
            ctx.fillStyle = lingrad; 
  
            // draw shape 
            ctx.fillRect(10, 10, 130, 130); 
        </script> 
    </center> 
</body> 
  
</html> 

Output:

Supported Browsers: The browsers supported by canvas createLinearGradient() Method are listed below:

Google Chrome
Internet Explorer 9.0
Firefox
Apple Safari
Opera

My Personal Notes

Recommended Posts: