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 gradient var 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 gradient context.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