<div id="container" style="width: 300px; height: 200px; border: 1px solid #ccc; resize: both; overflow: auto;"></div>
<button onclick="resizeSurface()">Resize Surface</button>
<script>
    var draw = kendo.drawing;
    var geom = kendo.geometry;
    var surface = draw.Surface.create($("#container"));

    var rect = new draw.Rect(new geom.Rect([10, 10], [100, 80]))
        .fill("orange");
    
    surface.draw(rect);

    function resizeSurface() {
        surface.resize();
/* The result can be observed in the DevTools(F12) console of the browser. */
        console.log("Surface resized to match container");
    }
</script>