HTML | canvas addColorStop() Method
The addColorStop() method is used to specify the color and its position in the gradient object.
Syntax:
gradient.addColorStop(stop, color);
Parameters:
- stop: It is a value between 0.0 and 1.0 that represents the position to be hold between start and end in a gradient.
- color: It is the color value to be displayed at the stop position.
Example:
<!DOCTYPE html><html> <head> <title> HTML canvas addColorStop() Method </title></head> <body style="text-align:left;"> <h1>GeeksforGeeks</h1> <h2>HTML canvas addColorStop() Method</h2> <canvas id="GFG" width="500" height="200" style="border:2px solid" > </canvas> <script> var doc_id = document.getElementById("GFG"); var context = doc_id.getContext("2d"); // Create gradientvar grad = context.createLinearGradient(0, 0, doc_id.width, 0);grad.addColorStop("0", "green");grad.addColorStop("0.5", "white");grad.addColorStop("1.0", "green");// Fill with gradientcontext.fillStyle = grad;context.fillRect(100, 50, 100, 100); </script></body> </html> |
Output:
Supported Browsers: The browser supported by HTML canvas addColorStop() Method are listed below:
- Google Chrome
- Internet Explorer 9.0
- Firefox
- Safari
- Opera
.png)
