html tutorial - createLinearGradient Method in HTML5 Canvas - html5 - html code - html form



Createlineargradient method in html5 canvas

Learn html - html tutorial - Createlineargradient method in html5 canvas - html examples - html programs

  • The createLinearGradient() method is used to create a linear gradient object in HTML Canvas.
  • This object is used to fill the different colors in a drawing.
  • It has four parameters they are x0, y0, x1 and y1.

Syntax for createLinearGradient() method in HTML5 Canvas:

context.createLinearGradient(x0,y0,x1,y1);

Parameter values:

parameter Description
X0 This is a starting point of an x axis coordinate of the gradient.
Y0 This is a starting point of a y axis coordinate of the gradient.
X1 This is an ending point of an x axis coordinate of the gradient.
Y1 This is an ending point of a y axis coordinate of the gradient.

Sample coding for createLinearGradient() method in HTML5 Canvas:

Tryit<!DOCTYPE html>
<html>
    <head>
        <title>Wikitechy HTML Canvas createLinearGradient </title>
    </head>
    <body>
        <h2>HTML Canvas createLinearGradient </h2>
        <canvas id="wikitechyCanvas" width="350"
                height="180" style="border:1px solid blue;">
        </canvas>
        <script>
            var a = document.getElementById("wikitechyCanvas");
            var gctx = a.getContext("2d");
            var clg = gctx.createLinearGradient(0, 0, 200, 0);
            clg.addColorStop(0, "yellow");
            clg.addColorStop(1, "pink");
            gctx.fillStyle = clg;
            gctx.fillRect(80, 20, 200, 110);
        </script>
    </body>
</html>

Code Explanation for createLinearGradient() method in HTML5 Canvas:

createlineargradient method in HTML5 canvas Code Explanation

  1. ”wikitechyCanvas” is used to define the value of id attribute for canvas element
  2. The getElementById(); method is used to get the element that has the id attributes with the specified value.
  3. a.getContext(“2d”) method is returns a two-dimensional drawing context on the canvas.
  4. The clg is created using a createLinearGradient() method which is set the position of the gradient.
  5. clg.addColorStop(0,”yellow”) is used to specify the color of a gradient as well as its stop to fill the color when its reach the gradient specific position.
  6. The clg.addColorStop(1,”pink”) is start to fill pink color to a rectangle when the yellow color reached the specific position of the gradient.
  7. fillStyle property is used to fill linear gradient to the rectangle on the canvas.
  8. fillRect() method is used to draw a filled rectangle on the canvas.

Sample Output for createLinearGradient() method in HTML5 Canvas:

createlineargradient method in HTML5 canvas Output

The output shows that the linear gradient goes from yellow to pink, as the fill style for the rectangle.
  1. The canvas rectangle with blue border.
  2. The linear gradient start to fill yellow color from the left side to specified gradient position.
  3. The linear gradient start to fill the pink color from the specific gradient position to right side of a rectangle.

Browser Support for createLinearGradient():

Yes Yes Yes Yes Yes

Tips and Notes

  • Use createLinearGradient() object as the value to the strokeStyle or fillStyle properties.
  • The addColorStop() method is used to specify different color of the gradient object and where to the position the colors in the gradient.

Related Searches to createLinearGradient Method in HTML5 Canvas