Open In App

HTML canvas createLinearGradient() Method

Last Updated : 09 Jun, 2023
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


Previous Article
Next Article

Similar Reads

HTML canvas rect() Method
The rect() method in HTML is used to create a rectangle in HTML. Syntax: context.rect(x, y, width, height) Parameters: x: It stores the x-coordinate of the top-left corner of the rectangle.y: It stores the y-coordinate of the top-left corner of the rectangle.width: It stores the width in pixel.height: It stores the height in pixel. Example-1: C/C++
1 min read
HTML canvas clearRect() Method
The clearRect() method is used to clear the specified pixels within a given rectangle. Syntax: context.clearRect( x, y, width, height ) Parameters: x: It stores the x-coordinate of the top-left corner of the rectangle.y: It stores the y-coordinate of the top-left corner of the rectangle.width: It stores the width in pixel.height: It stores the heig
1 min read
HTML canvas strokeRect() Method
The strokeRect() method is used to draw the rectangle in a given color. The default color of the stroke is black. Syntax: context.strokeRect(x, y, width, height) Parameters: x: It stores the x-coordinate of the top-left corner of the rectangle.y: It stores the y-coordinate of the top-left corner of the rectangle.width: It stores the width in pixels
1 min read
HTML canvas fillRect() Method
The fillRect() method is used to fill the rectangle using the given color. The default color of the fillRect() method is black. Syntax: context.fillRect( x, y, width, height ) Parameters: This method accepts four parameters as mentioned above and described below: x: It stores the x-coordinate of top-left corner of rectangle.y: It stores the y-coord
1 min read
HTML canvas fill() Method
The canvas fill() Method is used to fill the current drawing path. The default color of the canvas fill() method is black. Syntax: context.fill() Example-1: C/C++ Code &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt; HTML canvas fill() Method &lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;canvas id=&quot;GFG&quot; width=&quot;500&quot;
1 min read
HTML canvas stroke() Method
The canvas stroke() method is used to draw the path you have defined with all those moveTo() and lineTo() methods. The default color of the canvas stroke() method is black. Syntax: context.stroke() Example-1: C/C++ Code &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt; HTML canvas stroke() Method &lt;/title&gt; &lt;/head&gt; &lt;body
1 min read
HTML canvas translate() Method
The HTML canvas translate() Method is used to specify that the object is translated by given translate amount. Syntax: context.translate(x, y) Parameter Values: x: It stores the value, that how much the canvas will move left or right means x-axis wise.y: It stores the value, that how much the canvas will move up and down means y-axis wise. Example
2 min read
HTML canvas rotate() Method
The HTML canvas rotate() Method is used to rotate the drawing by a given angle. Note that the rotation will only work on the canvas that was made after the rotation was done. Syntax: context.rotate(angle) Parameter Values: angle: It stores the rotation angle in radians. If the angle is given in the form of a degree then it converts into a radian by
1 min read
HTML canvas scale() Method
The HTML canvas scale() Method is used to scale the current drawing into smaller or larger size. After scaling the drawing, all the feature of drawing scaled. It will have to define before the canvas. Syntax: context.scale( scalewidth, scaleheight ) Parameter Values: scalewidth: It scale the width of current drawing, (1=100%, 0.5=50%, 2=200%, and s
2 min read
HTML canvas beginPath() Method
The canvas beginPath() method is used to start a path or reset the current path. The moveTo(), lineTo(), quadricCurveTo(), bezierCurveTo(), arcTo(), and arc() methods are used to create paths. Also, the stroke() method is used to draw the path on the canvas. Syntax: context.beginPath(); Example 1: &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt;
2 min read