Tiled HTML5 Canvas Multiplayer Drawing

There are far too may tutorials out there describing how to  create a NodeJS app which either involves real time chat or drawing. A  couple of years back I was amazed at how easy it was to write 12 lines  of JavaScript code, chuck in a <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.

Initially I set about writing a JavaScript HTML5 canvas map framework  to allow tiles to be requested and drawn on screen but this involved  inventing up coordinate systems, panning animations and dealing with  tile grid boundaries. It got quite complex all while I was thinking there must be a JavaScript library already for this! Most JavaScript mapping libraries render <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.