collaborative drawing/ live drawing

Question

I wasn't sure where in the world I could post this one... So I have an idea for making a little drawing toy, but I am not sure on how I would implement this (on a data structure level)...

I am wanting to perhaps have a 1920 x 1080 window where I can have a paint brush and draw lines (just like paint), but here is the kicker. I want be able to save this drawing real time. The idea is that I can open a web browser and watch myself draw from another window... essentially collaborative paint.

Has this been done and are there any projects anyone can point me to as to how I could get started developing this?

There was a similar post to this, but it was three years old and I would like some recent input.

The biggest question is particularly the best data structure I could use to store this in a database for real time editing (or if that is even a good solution)

thanks!! :)

Answer 1

This would be relatively straight forward to do.

From a web based aspect...

You could use something like an HTML5 Canvas.

Then you can use JavaScript and do something like this:

document.onmousemove = function(event){
xcoor = event.pageX;
ycoor = event.pageY;
}

to capture mouse movements whenever you move the mouse.

You can also use the code to put a circle or square (square in this case but you can use a circle easily) as follows:

document.onmousemove = function(event){
xcoor = event.pageX;
ycoor = event.pageY;
mapcan.fillStyle = "#000000";
mapcan.fillRect(-1*(11617845.3461), -1*(8093417.14653), 10, 10);
}

Now you can use PHP or some other language to insert the cordinates into a database.

Trying to do live editing with multiple users is complicated at best. I would suggest sticking with a live view instead.

While this is resource intensive it will work.

Hope this helps if you dicide to build it!