html tutorial - addColorStop() Method in HTML5 Canvas - html5 - html code - html form

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

The addColorStop() is the Method of HTML canvas.
The addcolorstop() Method is used to identify the colors and location in a gradient object.
This object is used to fill the different colors in a drawing.

Syntax for addColorStop() Method in HTML5 Canvas:

gradient.addColorStop(stop,color);

Parameter values for addColorStop() Method in HTML5 Canvas:

Parameter	Description
stop	A value between 0.0 and 1.0 that represents the position between start and end in a gradient
color	A CSS color value to display at the stop position

Sample Coding for addColorStop() Method in HTML5 Canvas:

Tryit<!DOCTYPE html>
<html>
    <head>
      <title>wikitechy-addcolorstop() method in Canvas</title>
    </head>
    <body>
        <h2>Wikitechy-addcolorstop() method in canvas</h2>
        <canvas id="wikitechyCanvas" width="300" height="150" 
           style="border:1px solid #d3d3d3;">
        </canvas>
        <script>
          var c = document.getElementById("wikitechyCanvas");
          var context= c.getContext("2d");
          var gradient= context.createLinearGradient(10,10,150,0);
          gradient.addColorStop(0, "red");
          gradient.addColorStop(1, "pink");
          context.fillStyle = gradient;
          context.fillRect(30, 20, 180, 100);
        </script>
    </body>
</html>

Code Explanation for addColorStop() Method in HTML5 Canvas:

addColorStop() method in HTML5 canvas Code Explanation

”wikitechyCanvas” is used to declare the id value of the <canvas> tag.
The getElementById(); method is used to get the element with the specific id “wikitechyCanvas”.
The Gradient is created using a createLinearGradient() Method which is set the location of the gradient.
Gradient.addColorStop(0, ”red”) is used to identify the color of a gradient as well as it is stop to fill the color when it is reach the gradient specific location.
The gradient.addColorStop(1, ”pink”) is start to fill pink color to a Rectangle when the red color reached the specific location of the gradient.
The context.fillstyle is created using to fill the drawing in gradient.
The context.fillRect is used to set the co-ordinates of the rectangle.

Output for addColorStop() Method in HTML5 Canvas:

addColorStop() method in HTML5 canvas Output

The canvas Rectangle with gray border.
The addColorStop() linear gradient start to fill the pink color from the specific gradient location to right side of a Rectangle.
The addColorStop() start to fill red color from the left side to identified gradient location.