Drawing on top of an image

[vespino]

I would like to use this project for drawing on top of an image, setData should make this possible? Does anyone have an example? It would be nice if the image and signature/strokes are exported together, but not required since I can combine the two using PHP if necessary.

If the signature canvas could be transparant (instead of have a white background) so an image could be shown in the background, I would already be helped.

[vespino]

By adding some CSS I was able to achieve my goal:

.jSignature { background:url('image.jpg'); }

My backend merges the 2 images:

//create tmp file
$fp=fopen('tmp_file.png', 'w+');
$fw=fwrite($fp, base64_decode(preg_replace('#^data:image/\w+;base64,#i', '', 'data:'.$_POST['jSignature'][0].','.$_POST['jSignature'][1])));

$bg=imagecreatefromjpeg('image.jpg');
$fg=imagecreatefrompng('tmp_file.png');

imagecopy($bg, $fg, 0, 0, 0, 0, 600, 800); //change the last 2 values to the width and height of the desired output
imagepng($bg, 'result.png');

unlink('tmp_file.png');

Hopes this helps someone in the future.