JavaScript Electronic Signature

This code snippet helps you to create an electronic signature. It defines a simple HTML structure consisting of a container element with the ID canvas-wrap, which contains a canvas element for drawing. Inside the canvas-wrap container, there is also a div element with the ID buttons that contains a message div element with the ID text and two buttons: one with the ID download and the label “Save as PNG”, and another with the ID clear and the label “Clear”. The purpose of this code is likely to provide a simple drawing application or signature pad, where users can draw on the canvas and save their work as a PNG image using the “Save as PNG” button, or clear the canvas using the “Clear” button.

How to Create JavaScript Electronic Signature

Create the HTML structure for the electronic signature as follows:

<div id="canvas-wrap">
<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>

Now, style the electronic signature using the following CSS styles:

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;
      }
.cd__main{
display: block !important;
}
#download:hover, #clear:hover {
  background-color: transparent;
}

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

Add the following JavaScript function:

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;
};

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

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");
  }
}

That’s all! hopefully, you have successfully created Javascript Electronic Signature. If you have any questions or suggestions, feel free to comment below.