Webapp 2.0 and free hand signature

Hi everyone, I’m creating a webapp 2.0 in which I would like to manage the user’s signature on a touch screen monitor. I know that there are some plugins that allow you to do this but I think it can be done without it. Not being a javascript expert I have some difficulties. I found an html example that when loaded with a browser allows you to sign, but attempts made to handle it correctly in a Xojo project have failed. Could any of you kindly give me some pointers on this?
Thank you Oscar

<!DOCTYPE html>
<html lang="en" >
  <meta charset="UTF-8">
  <title>CodePen - Canvas: Free-Hand Drawing</title>
    body {
       background: #e74c3c;

    #canvas {
       position: relative;
       left: calc(50% - 390px);
       top: 50px;
       border: 1px dotted black;
       cursor: crosshair;
       background: #ecf0f1;

<!-- partial:index.partial.html -->
<canvas id="canvas"></canvas>
<!-- partial -->
	<script type="text/javascript">

    var canvas;
    var context;

    window.onload = function() {
       canvas = document.getElementById('canvas');
       context = canvas.getContext('2d');
       canvas.width = 780;
       canvas.height = 490;
       context.strokeStyle = "#913d88";
       context.lineWidth = 2;

       canvas.onmousedown = startDrawing;
       canvas.onmouseup = stopDrawing;
       canvas.onmousemove = draw;

       function startDrawing(e) {
          isDrawing = true;
          context.moveTo(e.pageX - canvas.offsetLeft, e.pageY - canvas.offsetTop);

       function draw(e) {
          if (isDrawing == true) {
             var x = e.pageX - canvas.offsetLeft;
             var y = e.pageY - canvas.offsetTop;

             context.lineTo(x, y);

       function stopDrawing() {
          isDrawing = false;

       /*var coord = document.getElementById("coord");
       canvas.onmousemove = function(e) {
          coord.value = e.pageX+" "+e.pageY+" / "+(e.pageX-canvas.offsetLeft)+" "+(e.pageY-canvas.offsetTop);



Graffiti suite, top product
And top support

1 Like

can you point to the html example you found ?

Hi Jean,
I update my topic with html code, sorry for my late.

Thank you,

Hi Jury,
thank you, but for me it is too expensive to buy plugins.


there are some posts which are similar:

Ricardo posted an WebSDK Control to get Mouse Pressed Events:
WebContainer Mouse Click

There is a javascript event for mouse movements
Mouse Move Events

Probably you can combine these two and get what you want…

Hi Daniel,
I try.

Thank you,

Hi Daniel,
I make some test but for me is very difficult, I’m not a JS or TS developer.
I hope someone can help me with piece of code or suggest some different way.

Thank you