<canvas> element with some mousemove listeners in a page and type
node server.js and away it goes!
Since then I’ve always thought it would be cool to extend the size of the drawing space to become an unlimited sized canvas? Well that’s what I hope to have working soon.
<img>tags in a mosaic fashion and animate the CSS ‘top’, ‘left’ or translate(x,y) properties coupled with event listeners to give the effect of a scrollable map. This won’t work for a drawing app where the user should be interacting with one single canvas where shapes and lines can be drawn on efficiently. The only library I could find was OpenLayers 3 which supports map tile rendering on a single canvas element.
The canvas element will span the entire browser screen and gets divided up into tiles which can be retrieved and saved from a server using a RESTful API. This might be a great opportunity to experiment with the new HTTP/2 (formerly known as SPDY) server implementations as it may enable the ability to request a region and receive a range of adjacent tiles all in one response rather than requesting each one. I am currently using a small Java JAX-RS 2.0 implementation in Tomcat but might switch to a more productive framework such as Rails or Python Flask.
Real time user events such as mouse move events from other people will be sent down a WebSocket connection and relayed to all connected users to display a cursor where others are drawing.
With GET and PUT operations working, hopefully there will be a working prototype for people to try out very soon in the browser.