display json canvas image from php on page load - php

Question

I am trying to recreate a signature in a canvas when the page loads.
I have managed to capture a signature and store it in a MySQL database using PHP. It is stored as json data.
Now the problem is this:
I have a page with a canvas element and I can retrieve the json data from the database before the page loads using php but I do not know how to pass this data to the canvas element.
Hoping for a solution because I have spent too many hours messing this up.
Thank you!
json data:
"[
{
\"lx\":87,
\"ly\":6,
\"mx\":87,
\"my\":5
},
{
\"lx\":88,
\"ly\":5,
\"mx\":87,
\"my\":6
},
{
\"lx\":89,
\"ly\":6,
\"mx\":88,
\"my\":5
},
{
\"lx\":89,
\"ly\":7,
\"mx\":89,
\"my\":6
},
{
\"lx\":90,
\"ly\":7,
\"mx\":89,
\"my\":7
},
{
\"lx\":90,
\"ly\":8,
\"mx\":90,
\"my\":7
},
{
\"lx\":90,
\"ly\":10,
\"mx\":90,
\"my\":8
},
{
\"lx\":91,
\"ly\":11,
\"mx\":90,
\"my\":10
},
{
\"lx\":92,
\"ly\":11,
\"mx\":91,
\"my\":11
},
{
\"lx\":92,
\"ly\":12,
\"mx\":92,
\"my\":11
},
{
\"lx\":93,
\"ly\":12,
\"mx\":92,
\"my\":12
},
{
\"lx\":93,
\"ly\":13,
\"mx\":93,
\"my\":12
},
{
\"lx\":95,
\"ly\":15,
\"mx\":93,
\"my\":13
},
{
\"lx\":96,
\"ly\":16,
\"mx\":95,
\"my\":15
},
{
\"lx\":97,
\"ly\":16,
\"mx\":96,
\"my\":16
},
{
\"lx\":97,
\"ly\":17,
\"mx\":97,
\"my\":16
},
{
\"lx\":98,
\"ly\":18,
\"mx\":97,
\"my\":17
},
{
\"lx\":99,
\"ly\":18,
\"mx\":98,
\"my\":18
},
{
\"lx\":99,
\"ly\":19,
\"mx\":99,
\"my\":18
},
{
\"lx\":99,
\"ly\":20,
\"mx\":99,
\"my\":19
},
{
\"lx\":102,
\"ly\":5,
\"mx\":102,
\"my\":4
},
{
\"lx\":101,
\"ly\":5,
\"mx\":102,
\"my\":5
},
{
\"lx\":101,
\"ly\":6,
\"mx\":101,
\"my\":5
},
{
\"lx\":100,
\"ly\":7,
\"mx\":101,
\"my\":6
},
{
\"lx\":100,
\"ly\":8,
\"mx\":100,
\"my\":7
},
{
\"lx\":99,
\"ly\":8,
\"mx\":100,
\"my\":8
},
{
\"lx\":99,
\"ly\":9,
\"mx\":99,
\"my\":8
},
{
\"lx\":98,
\"ly\":9,
\"mx\":99,
\"my\":9
},
{
\"lx\":98,
\"ly\":10,
\"mx\":98,
\"my\":9
},
{
\"lx\":97,
\"ly\":11,
\"mx\":98,
\"my\":10
},
{
\"lx\":96,
\"ly\":12,
\"mx\":97,
\"my\":11
},
{
\"lx\":95,
\"ly\":12,
\"mx\":96,
\"my\":12
},
{
\"lx\":94,
\"ly\":12,
\"mx\":95,
\"my\":12
},
{
\"lx\":93,
\"ly\":12,
\"mx\":94,
\"my\":12
},
{
\"lx\":91,
\"ly\":13,
\"mx\":93,
\"my\":12
},
{
\"lx\":89,
\"ly\":14,
\"mx\":91,
\"my\":13
},
{
\"lx\":89,
\"ly\":15,
\"mx\":89,
\"my\":14
},
{
\"lx\":88,
\"ly\":15,
\"mx\":89,
\"my\":15
},
{
\"lx\":87,
\"ly\":16,
\"mx\":88,
\"my\":15
},
{
\"lx\":86,
\"ly\":17,
\"mx\":87,
\"my\":16
},
{
\"lx\":86,
\"ly\":18,
\"mx\":86,
\"my\":17
},
{
\"lx\":85,
\"ly\":18,
\"mx\":86,
\"my\":18
},
{
\"lx\":85,
\"ly\":19,
\"mx\":85,
\"my\":18
},
{
\"lx\":85,
\"ly\":20,
\"mx\":85,
\"my\":19
},
{
\"lx\":84,
\"ly\":20,
\"mx\":85,
\"my\":20
}
]"

Answer 1

You have 2 options:
Echo into a javascript variable when you generate the page:
echo "<script>var sig = ".$jsonsig.";</script>";
or retrieve it after the page has loaded with an AJAX call
(jQuery in your page script, requires a PHP script to return the JSON code)
$.getJSON("getmysig.php",function(data) {
// create canvas here
});