Co-Drawing / Live Drawing

Question

I was not sure where in the world I could publish this ... So, I have an idea to make a small toy for drawing, but I'm not sure how to implement it (at the data structure level) ...

I probably want to have a 1920 x 1080 window where I can have a brush and draw lines (like paint), but here's a kicker. I want to save this drawing in real time. The idea is that I can open a web browser and see how I draw from another window ... essentially a joint paint.

Was this done, and are there any projects that anyone can point me to how I could start developing this?

There was a similar entry for this, but I was three years old, and I would like some recent material.

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

thanks!!:)

Answer 1

That would be relatively simple.

From the web aspect ...

You can 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 (a square in this case, but you can easily use a circle) 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 roots into the database.

Trying to do live editing with multiple users is at best more difficult. Instead, I suggest sticking to a lively view.

Although this is a resource intensive process, it will work.

Hope this helps if you do this to build it!