New to Kendo UI for jQuery? Download free 30-day trial

Implement Free-Form Drawing

The following example demonstrates how to implement a free-form drawing surface while working with the Kendo UI Drawing API.

    <div id="surface" style="width: 1000px; height: 1000px;border: 1px solid black;cursor: crosshair"></div>
      var draw = kendo.drawing;

      var path = new draw.MultiPath({
        stroke: {
          width: 1,
          color: "#000"

      var element = $("#surface")
      var surface = draw.Surface.create(element);

        dragstart: function (e) {
          var point = surfacePoint(e);
          path.moveTo(point.x, point.y);
        drag: function (e) {
          var point = surfacePoint(e);
          path.lineTo(point.x, point.y);

      function surfacePoint(e) {
        var offset = element.offset();
        var x = e.touch.x.location - offset.left;
        var y = e.touch.y.location -;
        return {
          x: x,
          y: y

See Also

In this article
Not finding the help you need? Improve this article