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



  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:

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


Output:

Example 2:

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


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 arrow_drop_up

Recommended Posts:



    Article Tags :
    Practice Tags :


    Be the First to upvote.


    Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.