<div id="surface"></div>
<script>
  var draw = kendo.drawing;
  var geom = kendo.geometry;

  var gradient = new draw.LinearGradient({
    start: [0, 0],
    end: [1, 1],
    stops: [
      { offset: 0, color: "#009900" },
      { offset: 1, color: "#66ff66" }
    ]
  });

  // Get the current start point
  console.log("Current start point:", gradient.start());

  // Change the start point to start from center
  gradient.start([0.5, 0.5]);
  console.log("New start point:", gradient.start());

  var rect = new geom.Rect([10, 10], [180, 120]);
  var path = draw.Path.fromRect(rect, {
    fill: gradient,
    stroke: { color: "#006600", width: 2 }
  });

  var surface = draw.Surface.create($("#surface"));
  surface.draw(path);
</script>