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
}
]"