Open In App

HTML canvas createLinearGradient() Method

Improve
Improve
Like Article
Like
Save
Share
Report

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::

  1. x0: This parameter indicates the x-coordinate of the start point of the gradient.
  2. y0: This parameter indicates the y-coordinate of the start point of the gradient.
  3. x1: This parameter indicates the x-coordinate of the end point of the gradient.
  4. 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


Last Updated : 09 Jun, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads