Edit this page

Draw a Signature and Export It to SVG

Environment

Product Progress Kendo UI Drawing API

Description

How can I allow the user to draw or sign their name on a Canvas, save it as an SVG, and undo the drawing if the user makes a mistake?

Solution

Allow the user to draw on the screen (Canvas) and export the drawing as an SVG file by using the Kendo Drawing API library.

<div id="surface-container">
  <div id="surface" style="width: 500px; height: 500px;border: 1px solid black;"></div>
</div>

<button class='export-svg k-button'>Export as SVG</button>
<button class='k-button clear'>Clear drawing</button>

<script>
  var geom = kendo.geometry;
  var Point = geom.Point;
  var draw = kendo.drawing;
  var Path = draw.Path;
  var path;

  $("#surface-container").on("mousemove", function(e) {
    if (!path) {
      return;
    }

    var offset = $(this).offset();
    var newPoint = new Point(e.pageX - offset.left, e.pageY - offset.top);

    path.lineTo(newPoint);
  }).on("mousedown", function(e) {
    path = new Path({
      stroke: {
        color: '#E4141B',
        width: 2,
        lineCap: "round",
        lineJoin: "round"
      }
    });

    var offset = $(this).offset();
    var newPoint = new Point(e.pageX - offset.left, e.pageY - offset.top);

    for (var i = 0; i < 1; i++) {
      path.lineTo(newPoint.clone().translate(i * 1, 0));
    }

    surface.draw(path);
  }).on("mouseup", function(e) {
    path = undefined;
  });

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

  $(".export-svg").click(function() {
    // Convert the DOM element to a drawing using kendo.drawing.drawDOM
    kendo.drawing.drawDOM($("#surface"))
      .then(function(group) {
      // Render the result as a SVG document
      return kendo.drawing.exportSVG(group);
    })
    .done(function(data) {
      // Save the SVG document
      kendo.saveAs({
        dataURI: data,
        fileName: "signature.svg",
        proxyURL: "https://demos.telerik.com/kendo-ui/service/export"
      });
    });
  });

  $(".clear").click(function() {
    surface.clear();
  });
</script>

See Also

Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy