Question

I am having a hard time thinking this one through

Let’s say you have a sketch app built with JS. For example: http://intridea.github.com/sketch.js/

And you want to store the user’s drawing after they draw something. So that whenever someone visits the site it loads all the previous drawings. It’s a bit faking realtime multiuser drawing, because making it really realtime is not an option at the moment.

Server-side I am working with PHP and MySQL, I don’t know if that’s any good for this.

Thanks.

Answer 1

The canvas you apply ‘sketch.js’ to (using $('#myCanvas').sketch()), has a function that is called toDataURL() (on the HTML element, not the jQuery element). You can upload the data this function returns to your server.

$('#upload').click(function () {
    $.post('/upload_image.php', { data: $('#myCanvas').get(0).toDataURL() }, function () {
         alert('uploaded');
    });
});

You can restore the canvas by loading in the data that was posted to your server. See for example here: http://www.html5canvastutorials.com/advanced/html5-canvas-load-image-data-url/.