<div id="surface"></div>
<script>
var draw = kendo.drawing;
var surface = draw.Surface.create($("#surface"));

// Creating gradient stops with different opacity values
var transparentStop = new draw.GradientStop({
    offset: 0,
    color: "#ff0000",
    opacity: 0 // Completely transparent
});

var semiTransparentStop = new draw.GradientStop({
    offset: 0.5,
    color: "#ff0000",
    opacity: 0.5 // Semi-transparent
});

var opaqueStop = new draw.GradientStop({
    offset: 1,
    color: "#ff0000",
    opacity: 1 // Completely opaque
});

console.log(transparentStop.options.opacity); // 0
console.log(semiTransparentStop.options.opacity); // 0.5
console.log(opaqueStop.options.opacity); // 1
</script>