JSFiddle - React, Tailwind, and code Playground
HTML
<div id="container">
</div>
CSS
#signatureCanvas
{
border:solid 1px lightgray;
}
JavaScript
(function (ns) {
/*"use strict";*/
ns.SignatureControl = function (options) {
var containerId = options && options.canvasId || "container",
callback = options && options.callback || {},
label = options && options.label || "Signature (please draw your signature in this box)",
cWidth = options && options.width || "300px",
cHeight = options && options.height || "300px",
btnClearId,
btnAcceptId,
canvas,
ctx;
function initCotnrol() {
createControlElements();
wireButtonEvents();
canvas = document.getElementById("signatureCanvas");
canvas.addEventListener("mousedown", pointerDown, false);
canvas.addEventListener("mouseup", pointerUp, false);
ctx = canvas.getContext("2d");
}
function createControlElements() {
var signatureArea = document.createElement("div"),
labelDiv = document.createElement("div"),
canvasDiv = document.createElement("div"),
canvasElement = document.createElement("canvas"),
buttonsContainer = document.createElement("div"),
buttonClear = document.createElement("button"),
buttonAccept = document.createElement("button");
labelDiv.className = "signatureLabel";
labelDiv.textContent = label;
canvasElement.id = "signatureCanvas";
canvasElement.clientWidth = cWidth;
canvasElement.clientHeight = cHeight;
/*canvasElement.style.border = "solid 2px black";*/
buttonClear.id = "btnClear";
buttonClear.textContent = "Clear";
buttonAccept.id = "btnAccept";
buttonAccept.textContent = "Accept";
canvasDiv.appendChild(canvasElement);
buttonsContainer.appendChild(buttonClear);
...