JSFiddle - React, Tailwind, and code Playground

by Cellendhyll

HTML

<body>

    <header id="header">
    
    </header>

    <section id="content">
        <canvas id="signaturePad">DSorry your browser is rubbish</canvas>
    </section>

    <footer>
        
    </footer>

</body>

CSS

body
{
  margin: 0;
  padding: 0;
}

header 
{
  border: 1px solid black;
  width: 100%;
  height: 50px;
}

#content
{
  border: 1px solid blue;
  width: 100%;
  height: 300px;
  position: relative;
}

#content #signaturePad
{
  border: 1px solid red;
  width: 200px;
  height: 200px;
  position: absolute;
  left: calc(50% - 100px);
  top: calc(50% - 100px);
}

footer
{
  border: 1px solid black;
  width: 100%;
  height: 50px;
}

JavaScript

//canvas
    var canvas = document.getElementById("signaturePad");
    var context = canvas.getContext("2d");
    var radius = 1;
    var dragging = false;
    context.lineWidth = 2*radius;

    function displayMousePosition(mouseX, mouseY) {
        var header = document.getElementById("header");
        header.innerHTML = "X : " + mouseX + "<br />Y : " + mouseY;
    }

    function getMousePosition(e) {
        var mouseX = 0,
            mouseY = 0,
            elmX = 0,
            elmY = 0,
            obj = this;
        //get mouse position on document crossbrowser
        if (!e){e = window.event;}
        if (e.pageX || e.pageY){
            mouseX= e.pageX;
            mouseY = e.pageY;
        } else if (e.clientX || e.clientY){
            mouseX = e.clientX + document.body.scrollLeft
                     + document.documentElement.scrollLeft;
            mouseY = e.clientY + document.body.scrollTop
                     + document.documentElement.scrollTop;
        }
        //get parent element position in document
        if (obj.offsetParent){
            do{ 
                elmX += obj.offsetLeft;
                elmY += obj.offsetTop;
            } while (obj = obj.offsetParent);
        }

        displayMousePosition(mouseX, mouseY);
        return [mouseX, mouseY];
    }

    var putPoint = function(e) {
        if(dragging) {
            var offset = $("#signaturePad").offset();
            var mouseX = getMousePosition(e)[0];
            var mouseY = getMousePosition(e)[1];
            context.lineTo(mouseX, mouseY);
            context.stroke();
            context.beginPath();
            context.arc(mouseX, mouseY, radius, 0, Math.PI*2);
            context.fill();
            context.beginPath();
            context.moveTo(mouseX, mouseY);
        }
    }

    $(document).on("mousedown", "#signaturePad", function(e) {
        dragging = true;
        putPoint(e);
    });

    $(document).on("mouseup", "#signaturePad", function() {
     ...