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:

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

- 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.
Browser Support for addColorStop() Method in HTML5 Canvas:
![]() |
![]() |
![]() |
![]() |
![]() |
---|---|---|---|---|
Yes | 9.0 | Yes | Yes | Yes |