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

    // Draw some initial shapes
    var rect = new draw.Rect(new geom.Rect([50, 50], [100, 80]))
        .fill("blue");
    var circle = new draw.Circle(new geom.Circle([250, 100], 40))
        .fill("red");

    surface.draw(rect);
    surface.draw(circle);

    function clearSurface() {
        surface.clear();
/* The result can be observed in the DevTools(F12) console of the browser. */
        console.log("Surface cleared");
    }
</script>