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

    // Create different shapes
    var rect = new draw.Rect(new geom.Rect([50, 50], [100, 80]))
        .fill("lightblue");
    var circle = new draw.Circle(new geom.Circle([250, 100], 40))
        .fill("lightcoral");

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

    // Add click event listener to the container
    $("#container").on("click", function(e) {
        var targetElement = surface.eventTarget(e);
        if (targetElement) {
/* The result can be observed in the DevTools(F12) console of the browser. */
            console.log("Clicked on drawing element:", targetElement.options.fill.color);
        }
    });
</script>