Allow to draw on a div and sync it to many using Javascript & HTML 5

I am trying to develop a website in which you can scribble on an element and want to share it to all who is seeing the page using ajax. A miniature version of whiteboard. I have know Idea where to start. I have decent understanding of Html, CSS, Javascript(Jquery)and PHP. I am having a starting trou开发者_Go百科ble. No idea what all technologies and methods to use.

You should create an HTML5 canvas element and position it above the element. On the canvas you can implement a simple scribbling functionality (such as the one here).

When you want to sync the scribbling to the server you can use the Canvas's toDataURL method to post the image data to the server using ajax.

On the server you can decode the base64 encoded dataurl and distribute the image as a regular image to the other viewers.

try to implement a single-user wihteboard with canvas. thats a method to draw something on websites, not limited to vector-graphics.

if you're done with this try to communicate with a central server via ajax and upload the canvas' data. then it's possible to distribute your new content to as amany other clients as you wish. and if they modifie it, reupload the new data.

as an alternative for canvas you may want to try a svg approach. this could bring some benefits as the data you will have to send over the internet is smaller, but ie is like always...