Skip to content
Related Articles

Related Articles

Improve Article

HTML | canvas createLinearGradient() Method

  • Last Updated : 12 Jul, 2019

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

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :