Hello So i have a signature pad here which works perfect on a fiddle but when i include it all together myself without changing anything it just simply won't let me write on it. It'll show, and provide the pointer effect ect but wont actually allow me to write in it.
I included the code all in one page am i suppose to include it in different pages, or what am i doing wrong that it wont write on the pad?
Hope you guys can tell me whats wrong and maybe i'm doing something wrong.
$(function() {
var canvas = document.getElementById('thecanvas');
var signaturePad = new SignaturePad(canvas);
drawSignatureLine();
$('button.save').click(function() {
window.open(signaturePad.toDataURL("image/png"));
});
$('button.clear').click(function() {
signaturePad.clear();
drawSignatureLine();
});
function drawSignatureLine() {
var context = canvas.getContext('2d');
context.lineWidth = .5;
context.strokeStyle = '#333';
context.beginPath();
context.moveTo(0, 150);
context.lineTo(500, 150);
context.stroke();
}
});body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
body {
font-family: arial;
background-color: #656565;
text-align: center;
margin: auto;
}
canvas#thecanvas {
border: dashed 1px #333;
cursor: pointer;
background-color: rgba(255, 255, 255, .85);
width: 475px;
height: 225px;
}
div.buttons {
text-align: center;
width: 477px;
background-color: rgba(255, 255, 255, .85);
position: relative;
top: -3px;
margin: auto;
}
div.buttons button {
padding: 15px;
margin: 5px;
cursor: pointer;
}
label {
margin-top: 25px;
width: 467px;
padding: 5px;
text-align: left;
display: inline-block;
background-color: rgba(255, 255, 255, .85);
}<script src="https://cdnjs.cloudflare.com/ajax/libs/signature_pad/1.3.6/signature_pad.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label>Sign On the Line Below:</label><br/>
<canvas id="thecanvas" width="475px" height="225px"></canvas>
<div class="buttons">
<button class="save">Save</button>
<button class="clear">Clear</button>
</div>How i Have it online:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/signature_pad/1.3.6/signature_pad.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="application/javascript">
$(function(){
var canvas = document.getElementById('thecanvas');
var signaturePad = new SignaturePad(canvas);
drawSignatureLine();
$('button.save').click(function(){
window.open(signaturePad.toDataURL("image/png"));
});
$('button.clear').click(function(){
signaturePad.clear();
drawSignatureLine();
});
function drawSignatureLine(){
var context = canvas.getContext('2d');
context.lineWidth = .5;
context.strokeStyle = '#333';
context.beginPath();
context.moveTo(0, 150);
context.lineTo(500, 150);
context.stroke();
}
});
</script>
<style type="text/css">
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
body{font-family: arial; background-color: #656565; text-align: center; margin: auto;}
canvas#thecanvas{border: dashed 1px #333; cursor:pointer; background-color: rgba(255,255,255,.85); width: 475px; height: 225px;}
div.buttons{text-align: center; width: 477px; background-color: rgba(255,255,255,.85); position: relative; top: -3px; margin: auto;}
div.buttons button{padding: 15px; margin: 5px; cursor: pointer;}
label{margin-top: 25px;width: 467px; padding: 5px; text-align: left; display: inline-block; background-color: rgba(255,255,255,.85);}
</style>
</head>
<body>
<label>Sign On the Line Below:</label><br/>
<canvas id="thecanvas" width="475px" height="225px"></canvas>
<div class="buttons">
<button class="save">Save</button>
<button class="clear">Clear</button>
</div>
</body>
</html>
