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:
Related Searches to addcolorstop method in html5 canvas
method used to draw an image on canvasaddcolorstop rgbacreatelineargradientcanvas tutorialin html5, which attribute is used to specify that an input field must be filled outwhich of the following method is used to draw an image on a canvascreateradialgradientgetcontexthtml5 canvashtml tutorials
