JS Simple Signature Pad

Create the Signature Pad and export the file as PNG.

Demo:

What do you need to do?

Add HTML
Add CSS
Add JavaScript

Step1.

Add HTML

Create the canvas-wrap:

<div id="canvas-wrap">
<canvas id="canvas"></canvas>   
<div id="buttons">
       <div id="text">Please sign above</div>
       <input type="button" id="download" value="Save as PNG"/>
      <input type="button" id="clear" value="Clear">
    </div>
</div>

Step2.

Add CSS

body {
  height: 100vh;
}

canvas {  
  background-color: #fff;
  border-radius: 15px;
  border: 5px solid black; 
}

#canvas-wrap {
  position: relative;
 
}

 #download, #clear {
        position: relative;
        top: 0;
        left: 170px;
        padding: 10px;
        background-color: #57c4e5;
        border: 3px solid black;
        color: black;
        display: block-inline;
        margin-top: 5px;
        margin-right:5px;
        transition: .3s;
      }

#download:hover, #clear:hover {
  background-color: transparent;
}

#text {
  position:relative;
  font-weight: bold;
  left: 190px;
}

Step3.

Add JavaScript

To draw on the canvas:

var canvas = document.querySelector('canvas');
  canvas.style.position = 'relative';
  canvas.style.top = "0";
  canvas.style.left = "0";

var ctx = canvas.getContext('2d');
canvas.width = 500;
canvas.height = 350;

ctx.lineWidth = 3;
ctx.lineJoin = ctx.lineCap = 'round';

var isDrawing, drawLine;

canvas.onmousedown = function(event) {
  isDrawing = true;
  drawLine = { x: event.clientX, y: event.clientY };
};

canvas.onmousemove = function(event) {
  if (!isDrawing) return;

  ctx.beginPath();
  
  ctx.moveTo(drawLine.x, drawLine.y);
  ctx.lineTo(event.clientX, event.clientY);
  ctx.stroke();
     
  drawLine = { x: event.clientX, y: event.clientY };
};

canvas.onmouseup = function() {
  isDrawing = false;
};

To clear the canvas:

document.getElementById('clear').addEventListener('click', function() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
      }, false);

To export the file as PNG:

window.onload = function(){
var save = document.getElementById('download');

 save.onclick = function(){
    download(canvas, 'signature.png');
  }

}

function download(canvas, filename) {
  var lnk = document.createElement('a'), e;
  lnk.download = filename;
  lnk.href = canvas.toDataURL("image/png;base64");
  
  if (document.createEvent) {
    e = document.createEvent("MouseEvents");
    e.initMouseEvent("click", true, true, window,
                     0, 0, 0, 0, 0, false, false, false,
                     false, 0, null);

    lnk.dispatchEvent(e);
  } else if (lnk.fireEvent) {
    lnk.fireEvent("onclick");
  }
}

Enjoy coding!

Share this: