JSFiddle - React, Tailwind, and code Playground

by Jinhui LEE

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/signature_pad/1.5.3/signature_pad.min.js"></script>
<canvas id="signature" width="600" height="200"></canvas>
<div>
	<button id="save">Save</button>
	<button id="clear">Clear</button>
</div>

CSS

#signature { border:1px solid #000; }
#save, #clear { padding:5px 20px; border:0; color:#fff; background:#000; margin-top:5px; }

JavaScript

var canvas = $("#signature")[0];
var signature = new SignaturePad(canvas, {
	minWidth : 2,
	maxWidth : 2,
	penColor : "rgb(0, 0, 0)"
});
 
$("#clear").on("click", function() {
	signature.clear();
});
 
$("#save").on("click", function() {
	if(signature.isEmpty()) {
		alert("내용이 없습니다.");
	} else {
		var data = signature.toDataURL("image/png");
		window.open(data, "test", "width=600, height=200, scrollbars=no");
	}
});