Multi pads

[blume1984]

Hey,..

i want to use two or more signature field on one page, is it possible? Did not work here.

bets regards

[UziTech]

You should be able to if you have multiple canvases. Can you tell us what you tried that didn't work?

[blume1984]

Yes with the second one i could not create a signature. Do u have a simple example for two signature-pads? From: Tony Brix Sent: Thursday, July 7, 2022 3:41 PM To: szimek/signature_pad Cc: blume1984 ; Author Subject: Re: [szimek/signature_pad] Multi pads (Discussion #632) You should be able to if you have multiple canvases. Can you tell us what you tried that didn't work? — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you authored the thread.Message ID: ***@***.***>

[blume1984]

Ok maybe a little bit of code...
I have two of them with different id´s;

<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<div class="form-group">
	<div id="signature-pad" class="m-signature-pad">
		<div class="m-signature-pad--body">
			<canvas></canvas>
			<input type="hidden" name="signature" id="signature" value="">
		</div>
	</div>  
</div>
</div>

init is here (with a different id too:
var wrapper = document.getElementById("signature-pad"), canvas = wrapper.querySelector("canvas"), signaturePad;

[blume1984]

@UziTech do u have an idea?

[szimek]

@blume1984 Hi! Could you provide a minimal failing example e.g. on CodeSandbox? You can use this template as a basis: https://codesandbox.io/s/objective-browser-p4e1f

[TP-Harry-Phillips]

Hey, I was attempting to do the same thing but in a different way, I created a function that turns any div into a signature pad.
https://codesandbox.io/s/youthful-torvalds-eshp7d?file=/js/signPadApp.js

[jricca218]

Hey all you gotta do is make another canvas with its own ID and then copy the initialization of the first signature-pad in the js and change the ID to that name. So basically do

var signaturePad = new SignaturePad(document.getElementById('signature-pad'), {
backgroundColor: 'rgba(255, 255, 255, 0)',
penColor: 'rgb(0, 0, 0)',
velocityFilterWeight: .7,
minWidth: 0.5,
maxWidth: 2.5,
throttle: 16, // max x milli seconds on event update, OBS! this introduces lag for event update
minPointDistance: 3,
});

var signaturePad2 = new SignaturePad(document.getElementById('signature-pad2'), {
backgroundColor: 'rgba(255, 255, 255, 0)',
penColor: 'rgb(0, 0, 0)',
velocityFilterWeight: .7,
minWidth: 0.5,
maxWidth: 2.5,
throttle: 16, // max x milli seconds on event update, OBS! this introduces lag for event update
minPointDistance: 3,
});