Tiled HTML5 Canvas Multiplayer Drawing

Far too many tutorials describe creating a NodeJS app involving 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 mouse move listeners on 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, I hope to have that working soon.

Initially, I set about writing a JavaScript HTML5 canvas map framework to allow tiles to be requested and drawn on the screen. However, this involved inventing coordinate systems, panning animations and dealing with tile grid boundaries. It got pretty complex, and I thought 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 users should interact with one canvas where shapes and lines can be drawn 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 get divided into tiles that can be retrieved and saved from a server using a RESTful API. This might be an excellent opportunity to experiment with the new HTTP/2 (formerly known as SPDY) server implementations. It may enable the ability to request a region and receive a range of adjacent tiles in one response rather than asking each one. I currently use 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, a working prototype in the browser will be available very soon for people to try out.