Adds a new stop to a gradient. If offset is less than 0 or greater than 1 then an IndexSizeError exception must be thrown. If the color cannot be parsed as a CSS <color> value, then a SyntaxError exception must be thrown. Otherwise the gradient must have a new stop placed, at offset offset relative to the whole gradient, and with the color obtained by parsing color as a CSS <color> value.
Method of apis/canvas/CanvasGradientapis/canvas/CanvasGradient
Syntaxvar object = CanvasGradient.addColorStop(offset, color);
A floating point value between 0.0 and 1.0 that represents the position between the start and end points in a gradient.
colorA CSS color string to display at the position that the offset parameter specifies.
Return ValueReturns an object of type DOM NodeDOM Node
Type: HRESULT
If this method succeeds, it returns S_OK. Otherwise, it returns an HRESULT error code.
ExamplesThe following code example creates a gradient.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function draw()
{
var canvas = document.getElementById("MyCanvas");
if (canvas.getContext) {
var ctx = canvas.getContext("2d");
gradient = ctx.createLinearGradient(0, 0, canvas.width, 0);
gradient.addColorStop("0","magenta");
gradient.addColorStop(".25","blue");
gradient.addColorStop(".50","green");
gradient.addColorStop(".75","yellow");
gradient.addColorStop("1.0","red");
ctx.fillStyle = gradient;
ctx.fillRect (0,0,300,250);
ctx.fillRect(250,300,600,500);
}
}
</script>
</head>
<body>
<canvas id="MyCanvas" width="600" height="500" border="1"> </canvas>
<button onclick="draw()">Click me</button>
</body>
</html>
You can call the addColorStop method multiple times to change a gradient. If you never call this method for CanvasGradient, the gradient is not visible. You need to create at least one color stop to have a visible gradient.
Related specificationsMicrosoft Developer Network: Windows Internet Explorer API reference Article
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4