Robert Dickey Robert Dickey - 1 year ago 45
PHP Question

Posting inside function

I am using JS and HTML5 canvas to capture signatures. The person signs the box, clicked submit, and then is displayed the signature for fun. The signature is displayed in PNGURL

What I would like to happen is when the user clicks submit it then POSTS the data to another page (i would like to redirect, vs staying on the same page like with AJAX). What is the best way to post? I have tried several options, but as I am new to JS, I cannot seem to get the POST to work properly.

Here is my code


<!DOCTYPE html>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<script src="todataurl.js"></script>
<script src="signature.js"></script>


<div id="canvas">
<canvas class="roundCorners" id="newSignature"
style="position: relative; margin: 0; padding: 0; border: 1px solid #c4caac;"></canvas>


<button type="button" onclick="signatureSave()">
<button type="button" onclick="signatureClear()">
Clear signature
Saved Image
<img id="saveSignature" alt="Saved image png"/>


Signature.JS (the function I would like to post from is signatureSave)

function signatureCapture() {
var canvas = document.getElementById("newSignature");
var context = canvas.getContext("2d");
canvas.width = 560;
canvas.height = 180;
context.fillStyle = "#fff";
context.strokeStyle = "#444";
context.lineWidth = 1.5;
context.lineCap = "round";
context.fillRect(0, 0, canvas.width, canvas.height);
var disableSave = true;
var pixels = [];
var cpixels = [];
var xyLast = {};
var xyAddLast = {};
var calculate = false;
{ //functions
function remove_event_listeners() {
canvas.removeEventListener('mousemove', on_mousemove, false);
canvas.removeEventListener('mouseup', on_mouseup, false);
canvas.removeEventListener('touchmove', on_mousemove, false);
canvas.removeEventListener('touchend', on_mouseup, false);

document.body.removeEventListener('mouseup', on_mouseup, false);
document.body.removeEventListener('touchend', on_mouseup, false);

function get_coords(e) {
var x, y;

if (e.changedTouches && e.changedTouches[0]) {
var offsety = canvas.offsetTop || 0;
var offsetx = canvas.offsetLeft || 0;

x = e.changedTouches[0].pageX - offsetx;
y = e.changedTouches[0].pageY - offsety;
} else if (e.layerX || 0 == e.layerX) {
x = e.layerX;
y = e.layerY;
} else if (e.offsetX || 0 == e.offsetX) {
x = e.offsetX;
y = e.offsetY;

return {
x : x,
y : y

function on_mousedown(e) {

canvas.addEventListener('mouseup', on_mouseup, false);
canvas.addEventListener('mousemove', on_mousemove, false);
canvas.addEventListener('touchend', on_mouseup, false);
canvas.addEventListener('touchmove', on_mousemove, false);
document.body.addEventListener('mouseup', on_mouseup, false);
document.body.addEventListener('touchend', on_mouseup, false);

empty = false;
var xy = get_coords(e);
context.moveTo(xy.x, xy.y);
pixels.push(xy.x, xy.y);
xyLast = xy;

function on_mousemove(e, finish) {

var xy = get_coords(e);
var xyAdd = {
x : (xyLast.x + xy.x) / 2,
y : (xyLast.y + xy.y) / 2

if (calculate) {
var xLast = (xyAddLast.x + xyLast.x + xyAdd.x) / 3;
var yLast = (xyAddLast.y + xyLast.y + xyAdd.y) / 3;
pixels.push(xLast, yLast);
} else {
calculate = true;

context.quadraticCurveTo(xyLast.x, xyLast.y, xyAdd.x, xyAdd.y);
pixels.push(xyAdd.x, xyAdd.y);
context.moveTo(xyAdd.x, xyAdd.y);
xyAddLast = xyAdd;
xyLast = xy;


function on_mouseup(e) {
disableSave = false;
calculate = false;
canvas.addEventListener('touchstart', on_mousedown, false);
canvas.addEventListener('mousedown', on_mousedown, false);

function signatureSave() {

var canvas = document.getElementById("newSignature");// save canvas image as data url (png format by default)
var dataURL = canvas.toDataURL("image/png", 0.1);
document.getElementById("saveSignature").src = dataURL;

alert(dataURL); //making sure it works


function signatureClear() {
var canvas = document.getElementById("newSignature");
var context = canvas.getContext("2d");
context.clearRect(0, 0, canvas.width, canvas.height);

Updated Code

<form id="hiddenForm" action="signatureaccepted.php" method="POST">
<input type="hidden" id="hiddenDataURL" />
<button type="button" onclick="signatureSave()"> Sign Out </button>

pid pid
Answer Source

If you have the correct URL to which to POST in the form, you can do as follows.

<form id="hiddenForm" action="correct_post_url.php" method="POST">
  <input type="hidden" id="hiddenDataURL" />

Then when the user clicks submit you put the data into the hidden field and submit the form:

function signatureSave() {

    var canvas = document.getElementById("newSignature");// save canvas image as data url (png format by default)
    var dataURL = canvas.toDataURL("image/png", 0.1);

    // this does not make sense anymore,
    // you'll abandon the page shortly and not see the image displayed!
    //document.getElementById("saveSignature").src = dataURL;

    //    alert(dataURL);  //making sure it works

    document.getElementById("hiddenDataURL").value = dataURL;

This will take care of the job and post the dataURL to correct_post_url.php.

You will find the data in: