Save drawing coordinates from canvas to database

Question

I'm currently trying to track a persons drawing movements, and saving them to a database.

On my webpage there is a canvas, which allows the user to draw using the mouse. What I would like is to be able to save the movements that the user makes while drawing, so that I am able to re-trace every movement made while drawing.

My own thoughts for a solution is that whenever the user clicks his mouse within the canvas, the coordinates will be saved until the user releases the mouse button. Another solution is to save an image of the canvas every 3-4 clicks in the canvas, so you are able to kind of see the drawing process.

Does anyone have a better solution, or some tips on how to best achieve such a feature?

UPDATE:

So I may not have been specific enough in my description. Basically I want to record the drawing process for a user by saving the coordinates, so that I am able to retrieve these coordinates from the database and play back the users movements while drawing.

The coordinates will be saved to the database when the user presses a save-button, so I need to store all the coordinates until the button is pressed.

I would like help on both the client- and server-side. The server-side is written in Java. I am currently using JavaScript on the client-side and MySQL as my database.

Just a quick tip: remember to be specific, and, "up-vote" (or down-vote) answers accordingly, else others may be reluctant to answer. — user4244405
Awesome, thanks for the update. See if the answer below is somewhat helpful, if so, up-vote it and if you need more information, comment below that answer. If not helpful, also comment as this provides more info on achieving what you need. — user4244405
Yes, I would like help on both the client- and server-side. The server-side is written in Java. I am currently using JavaScript on the client-side. I am currently using MySQL as my database. Thank you so much for your help, I really appreciate it. — DarthVaber
@CharlSteynberg Well, "vote up" privilege requires 15 reputation and OP has 1 reputation. — Michał Perłakowski

Unknown Unknown · Accepted Answer · 2016-04-11T08:16:14

Sending the coordinates to a server while the person is drawing may cause a lot of traffic, and may slow down your server's response with other users.

Instead of capturing and sending every movement, rather:

buffer the movements from mouse-down until mouse-up, and then send that "draw instance" to the server;
capturing these draw instances in an array and when the user is finished drawing -then only submit to server may be even better

Making use of a "web-socket" instance per user may be advantageous as this will be a lot faster than HTTP-request (AJAX) and at the same time, if you have multiple people drawing at the same time, the web-socket can push the data of other users to each connected user's live drawing.

I'm not sure what you need to accomplish here, but, the above may help. Perhaps if you can elaborate what it is you want to accomplish, a more detailed answer can be drafted with specific instructions on how to accomplish what you need.

Save drawing coordinates from canvas to database

1 Answers