shared drawing board

what's this?

This demo will demonstrate a fun usage of WebSocket and canvases. The idea is that you will share a drawing board with other users or devices and each time someone will draw something onto the canvas, all other participants will see the drawing in near real-time on their side too.

Please use the link below to share a drawing board:

https://demos.webfaction.com/drawing/board/a5e1

Note that each board can last only 5mn as this for demoing purpose.

how does it work?

The link above leads you to a page which will simply display two HTML5 canvases. One on the left acting as a simple toolbar to change your brush color and clear the whole drawing board. The canvas on the right is the drawing board where you can draw circles by clicking on your left button (or your finger on a mobile device).

In addition, in the background, a websocket connection is initialized with the server. That connection will be used to broadcast any drawing action you perform on your board.

Any other connected participant will then "see" whatever you draw on your board. Conversely, you will see what they draw as well.

The demo is hosted on a WebFaction shared host behind a Custom (websocket) application. This kind of application sets up a nginx frontend with the websocket module enabled. The demo simply runs a Python application listening on that port.

Note that on your mobile, the device motion is used whenever available. Press on the screen once and this ought to start the motion support. You will have to press again to stop it (or click on the Clean button).

where does it work?

This demo relies on modern browsers support for HTML5 features such as websocket and canvas.

It has been tested successfully on:

• Chromium 33.0.1750.152
• Firefox 28
• Chrome 34.0.1847.114 on Android 4.2.2
• Opera 12
• Internet Explorer 11

Note that the demo only supports RFC 6455 which is the official version of the WebSocket protocol. Some older devices implement other draft versions that this demo does not speak.