mrFreelancer supports this item


This author's response time can be up to 2 business days.

78 comments found.


How can I change the pencil color.


That can be done in the settings of the javascript file. There’s an option to change pencil colors.


I need to know in which part of “dd_signature_process.php” can I save the image(.png) to Database?

Best Regards!

Hi Asterix, sorry for the late reply… didn’t realize I had a new comment.

dd_signature_process.php does not save the img to any DB. It only generates the image and stores it in a specified directory. It’s up to you to add your own DB methods. Hope that helps.


Yes I know that don’t save it…but my question is in which part can I insert my code to save into DB?

Well, you can write your code anywhere really. If you’re able to write and understand PHP, it can be added to the dd_signature_process.php. Of course, explaining where and any details is beyond the scope of this software. Or you can simply write your own file that can fetch the image from the directory it’s saved and process it however you wish.

If you’d like further consultation, send me a private email and we can discuss rates.

Hope that helps :)

Hi, I need to know if can add a background to the canvas and if the possibility of change it with a select input or preadded images? like per example old paper, yellow paper like notes or crumpled paper

best regards!

Technically you can add a background but you’ll have to write your own function to do so. Best is to include it in the existing body event listener that instantiates everything.

but the background will save it with the signature? and can you explain me how can I change the background if is possible?

Best regards!

Technically yes, if apply a background, it should save BUT, it needs to be of an image that is local. In other words, it has to be on the same accessible server (or directly path). Hit me up privately for additional details.

Good Job, Incredible plugin! Thanks for this script.

Thank you. Do keep an eye out for a new update coming soon!

This script is brilliant, exactly what I needed. Only two questions:

1. Is it possible to change the color of the button? I looked in the code and could not see reference to this.

2. I’m trying to submit a form via php to email. How would you best attach the saved PNG or link to it?

Thank you! I’m glad you can use it. 1. Yes, you can change color of button. You can do so in the “dd_signature_pad.css” file that came with the package. The CSS Class is ”#dd_saveButton” 2. The signature saved as a PNG is located in a “tmp” directory, (or whatever the name of your designated directory). In fact, you can reference the file name in the JS file. The variable is “dd_outputFileName”.

Hope this helps :)

My apologies, the one place I overlooked was the CSS file. So obvious. Haha.

Thanks for the help.

hi i just buy your software but i think i want to know from you that after click on save button how to display the image in browser in the main time i save the image on server side .

HI any comment about this issue?

Sorry, been on the road for a few weeks. After it saves the image, it returns the name of the image back to you in the callback. From there you can write your own Javascript to display it to the screen. You’ll probably want to read through the docs and also see the comments in the Javascript file. Shoot me an email if you’d like additional help.

Hi, i need to put the Save Signature button on the right of the box of signs or over the box.

How i can do it? Thank you.

I’m sorry, can you better explain what you’re trying to do?

I’m planing to purchase it and I realize it useing PHP and i’m planning to use it in .NET project, so is it depends on PHP or only HTML5 and JS ??

Regards, Alex

The PHP file is only used for taking the base64 data and converting to an img with proper imagick PNG transparency support. Otherwise, everything else is HTML5/JS. So theoretically, you should be able to have a .NET equiv. Hope that helps.

This script is brilliant, exactly what I needed. I can make the customer sign the contract and put their mark? how can I do this? There is another plugin for the customer to sign with the mouse pointer or finger, and put your fingerprint. I want to buy your script. but I have to know this. Congratulations.

Thanks Maritas. This web app does allow you to use a mouse or finger to sign BUT does not do fingerprints.


I’m interested to buy HTML5 Signature Pad. Would I be able to implement it within a HTML5 page with other element.

Would I be able to set the path to save as per needed except default download folder.

Thanks for your interest. What “other” element are you referring to? As of now, you can implement it on whatever valid html tag. It simply writes the code to that tag.

Yes, you can set your own save path. It just defaults to “tmp” folder.

Hope that helps!

I see that you are offering to help with database insertion for an additional fee. Are you still offering that service?

Hello kidd56, sorry for the late reply. Been away for the new year. Yes, please hit me up privately for additional services.


Hi. Would it be easy to change the pencil to a finger? And can I take away all the options. Just want to make a signature areas is all? Don’t need pencil thickness or anything. Thanks

Yes sir. All those are options that can be controlled. Plz reference the manual. Do let me know if you have further questions. Thanks for buying!

Is there a way to set width and height in percentage? I want it to be mobile responsive. Thanks

unfortunately, it’s currently no possible. The dimensions are established upon object instantiation, so this means it must know the width/height in order to determine line drawing points. I hope that makes sense. You can however re-instatiate based on screen dimesions… you’ll have to write this logic out yourself.

How does this work with pdf docs? Would like to use it for contracts etc.

Thank you!

It doesn’t work directly in a PDF document. However, since this generates a PNG of the signature, you can have a set of scripts (perhaps like TCPDF), add it to the PDF. Send me a private email should you wish to get help in this regard as a separate service.


Berrern Purchased


For some reason, this only works for me in Firefox. On other browsers (tested it on Chrome, IE, Opera), when hovering over the box the ‘pencil’ icon shows, but nothing happens when I try to draw.

Any ideas what could be wrong?

Hi Berrern, thanks for purchasing. I ran through several tests and just checked it in Chrome 52 and Opera 39, and both work fine. However, there appears to be an issue with IE if the signature app is contained within an iframe. The draw vertical placement is off alignment.

You can test here in IE9 – 11 and see it does work:

It’s probable that you have something on your page that’s skewing the vertical drawing coordinates?


albetws Purchased

Hi, I’ve purchased your software and it nearly works a treat, Is there a way to save the signature to a different name for each signature as it currently over wright each time a new signature is saved. Regards Albetws

I’m sorry for the late reply. Did not realize I had this comment. Yes, you can actually dynamically change the name of it via Javascript. Please see the included documentation. If you need assistance still, just privately email me and I’ll point you in the right direction.


i have downloaded the code and made minor changes but can’t get the demo to work the browser says can’t save image please try again.

here is my link

Sorry defjam903, I’ve been away for a few weeks. Do you still assistance?


robiz Purchased

Thanks for the great script,

Is it possible to load a png in the signature canvas?

Hi Robiz, yes it’s possible.You’ll have to create your own script to manage that. If you wish, I can assist for a small fee. Just hit me up privately.

Also if you like this web app, please do rate it. I’d greatly appreciate it :)


robiz Purchased

Worked somtehing out already.. works like a charm!

var img = new Image(); img.src = ’##YOUR URL###’; img.onload = function(){ var canvas = document.getElementById(‘dd_canvas’); var ctx = canvas.getContext(‘2d’); ctx.drawImage(img, 0, 0); }

awesome! That definitely works :)