E-Signature

// Create a canvas element and add it to the page var canvas = document.createElement("canvas"); canvas.width = 400; canvas.height = 200; document.body.appendChild(canvas); var context = canvas.getContext("2d"); // Set the default font and color context.font = "16px sans-serif"; context.fillStyle = "#000000"; // Function to draw the signature on the canvas function drawSignature() { // Clear the canvas context.clearRect(0, 0, canvas.width, canvas.height); // Get the user's name var name = document.getElementById("name").value; // Get the selected font and color var font = document.getElementById("font").value; var color = document.getElementById("color").value; // Set the font and color context.font = font; context.fillStyle = color; // Draw the user's name on the canvas context.fillText(name, 100, 100); } // Function to download the signature as a PNG image function downloadSignature() { // Get the download link var link = document.getElementById("download"); // Set the download link's href to the data URL of the canvas link.href = canvas.toDataURL(); // Set the download link's download attribute link.download = "signature.png"; }

Name:

Font: Sans-Serif Serif Monospace Cursive Comic Sans Brush Script Lucida Handwriting Segoe Script Chalkboard Papyrus

Color: Black Red Green Blue

Draw Signature

Download Signature