New to Kendo UI for jQuery? Start a free 30-day trial

AddStop

methods

Adds a color stop to the gradient.

addStop

Parameters:offsetNumber

The stop offset from the start of the element. Ranges from 0 (start of gradient) to 1 (end of gradient).

colorString

The color in any of the following formats.

Format	Description
red	Basic or Extended CSS Color name
#ff0000	Hex RGB value
rgb(255, 0, 0)	RGB value

Specifying 'none', 'transparent' or '' (empty string) will clear the fill.

opacityNumber

The fill opacity. Ranges from 0 (completely transparent) to 1 (completely opaque).

Returns:kendo.drawing.GradientStop

The new gradient color stop.

<div id="surface"></div>
<script>
var draw = kendo.drawing;
var linearGradient = new draw.LinearGradient({
    stops: [
        { offset: 0, color: "#ff0000", opacity: 1 },
        { offset: 1, color: "#0000ff", opacity: 1 }
    ]
});

linearGradient.addStop(0.5, "#ffff00", 0.8);
var newStop = linearGradient.stops[2];
console.log("Added stop:", newStop.options.offset, newStop.options.color, newStop.options.opacity);

var surface = draw.Surface.create($("#surface"));
var rect = new draw.Rect(new kendo.geometry.Rect([10, 10], [120, 50]), {
    fill: linearGradient
});
surface.draw(rect);
</script>