<div id="container"></div>
<button onclick="addShape()">Add Shape</button>
<script>
    var draw = kendo.drawing;
    var surface = draw.Surface.create($("#container"), {
        width: "400px",
        height: "300px"
    });

    var shapeCount = 0;

    function addShape() {
        var x = Math.random() * 300;
        var y = Math.random() * 200;
        
        var circle = new draw.Circle(new draw.geometry.Circle([x + 50, y + 50], 25))
            .fill("hsl(" + (shapeCount * 45) + ", 70%, 50%)");

        surface.draw(circle);
        shapeCount++;
/* The result can be observed in the DevTools(F12) console of the browser. */
        console.log("Shape drawn at:", x + 50, y + 50);
    }
</script>