HTML canvas createLinearGradient() Method

Last Updated : 09 Jun, 2023

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:

html

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

html

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