JSFiddle - React, Tailwind, and code Playground

by Niklas Ottosson

HTML

<script src="code.jquery.com/jquery-1.9.1.js"></script>
<script src="code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script src="cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<div id="dialog-signature" title="-">
    <h1>SIGNATURE</h1>
    <input id="" type="text" placeholder="Type your name here" style="width:100%" data-bind=""/>
    <div id="canvas-div" style="border:2px solid;">
        <canvas id="signature-canvas" style="height:200px;width:750px;" ></canvas>
    </div>
</div>
<span id="log">Hej</span>

JavaScript

$(document).ready(function() {
// Init signature dialog
    $("#dialog-signature").dialog({
      autoOpen: true,
      resizable: false,
      //draggable: false,
      height:500,
      width:800,
      modal: true,
      buttons: [{
        id:"dialog-signature-save",
        text:"Spara",
        click: function() {
            $(this).dialog( "close" );
        }},
        {
        id:"dialog-signature-abort-button",
        text:"Avbryt",
        click: function() {
            $(this).dialog("close");
        }},
        {
            id:"dialog-signature-save",
            text:"Rensa",
            click: function() {clearCanvas();}
        }]
    });
    
    var log 		= function(data){
    	$("#log").text(data);
    }
    
    var canvas = document.getElementById('signature-canvas');
    var ctx = canvas.getContext('2d');

    var mouse = {x: 0, y: 0};

    $(canvas).bind('mousemove touchmove', function(e) {
        if(e.type == 'touchmove'){
            e.preventDefault();
        }

        var rect = canvas.getBoundingClientRect();

        if(e.clientX == undefined){
            mouse.x = (e.originalEvent.touches[0].clientX - rect.left) / (rect.right - rect.left) * canvas.width;
            mouse.y = (e.originalEvent.touches[0].clientY - rect.top) / (rect.bottom - rect.top) * canvas.height;
        }
        else {
            mouse.x = (e.clientX - rect.left) / (rect.right - rect.left) * canvas.width;
            mouse.y = (e.clientY - rect.top) / (rect.bottom - rect.top) * canvas.height;
        }

    });

    ctx.lineWidth = 3;
    ctx.lineJoin = 'round';
    ctx.lineCap = 'round';
    ctx.strokeStyle = '#00CC99';

    $(canvas).bind('mousedown touchstart', function(e) {
    log("touchstart");
        if(e.type == 'touchstart'){
            //e.stopPropagation();
            e.preventDefault();
        }

        ctx.beginPath();
        ctx.moveTo(mouse.x, mouse.y);

        $(canvas).bind('mousemove touchmove', onPaint);
    });

   ...