CODEWITHSUNDEEP
javascriptcanvas
dandoen
dandoen

Reputation: 1647

Sketching with JS

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.

Upvotes: 2

Views: 5420

Answers (3)

2called-chaos
2called-chaos

Reputation: 3078

If you still want to be able to edit the drawing afterwards you will have a problem with the toDataURL approach.

I recently implemented sketch.js with a different saving approach and undo/redo functionality.

I answered the question in this issue on Github.

» My full implementation incl. undo/redo

# this is what I save via AJAX
dataURL: -> JSON.stringify(@getSketch().actions)

load: (id) ->
  $.ajax "#{@getContainer().data("target-url")}/#{id}.json",
    success: (data, status, xhr) =>
      sketch = @getSketch()
      $.each data.json_data, -> sketch.actions.push(this)
      sketch.redraw()
    error: (xhr, status, msg) => alert("Failed to load sketch! #{xhr.status}: #{msg}")

This is CoffeeScript, you can convert it to JS if you prefer this but it get's a bit cryptic.

Upvotes: 0

Xenethyl
Xenethyl

Reputation: 3199

There are a number of complicated issues to address with a project like this. I actually recently developed a real-time canvas-based multi-user drawing application using PHP and MySQL for the backend. Some of the more important ideas are:

JS doesn't have the ability to poll mouse coordinates at the resolution you really need for a perfect drawing app. For light, fun sketching you can get away with it. Emulating Photoshop quality is not possible, though. This issue primarily results in faceted sketch lines. You can see this slightly in the example you linked to, but it is overly apparent if you are not using the native line drawing functions and instead are using custom stamp shapes.

Uploading the user's canvas state is possible via the method Jan Jongboom explained, but it is not without issues. Consider this scenario: user1 and user2 connect to the app at the same time and are greeted with a blank canvas. user1 draws a large red, filled-in circle and then user2 draws a large blue, filled-in triangle. From an outside observer, user1 drew their shape first and user2 drew theirs second. In a rather likely scenario, let's assume that user2's drawing is finished uploading to the server before user1's due to network latency. Your server will incorrectly save user1's state on top of user2's. This is a rather simplified version of the problem, but it is a massive issue as the system scales and multiple people are drawing at the same time. People will end up drawing over each other, and the state of the canvas will be different for each local user.

Another issue to consider is that uploading the canvas data after each action doesn't scale with the resolution of the canvas at all. If you're designing something that should run at full-screen resolution, uploading (for example) a 1680x1050 image after every action is certainly not efficient. Instead, you should look at transmitting the information needed to re-create the user's actions. This is a much better approach (ie. draw a blue circle with a radius of 9px at [4,6]). This also lends itself better to database organization.

One option that I entertained for a while was having PHP update a server-side image of the canvas that everyone was drawing on. As the updates were received by the server, PHP would load the same resources used locally by the users and would perform the same drawing actions. Then, when a new user connected they just grabbed the most recent server-side image and processed any additional updates locally to catch up with everyone else. Unfortunately, this didn't scale well at all as all of PHP's image functions are CPU-based and when you're working with things like brush resizing, rotating, transparency, and spacing it just took too long for an update to be processed to be worthwhile.

Aside from line quality, the largest issue you will face is keeping everyone synchronized. For your purposes, this may not be an issue at all, but if you're shooting to implement a multi-user Photoshop in a browser it's a pretty big ticket item.

If you have any other questions about this or specific ideas/approaches, feel free to ask.

Upvotes: 2

Jan Jongboom
Jan Jongboom

Reputation: 27323

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/.

Upvotes: 5

Related Questions