A Stable Layered Canvas Mechanism for Collaborative Web Applications

Real-time collaborative Web applications are being extensively studied and several DOM-based efficient synchronization methods have been proposed. However, there has not been sufficient study on 2D drawing synchronization on Web browsers. We have been focused on resolving issues related to drawing delay when synchronizing HTML5 Canvas, which is a DOM element for 2D drawing, and previously proposed two methods that assign drawings to multiple canvas elements in order to improve the delay. Synchronization delay includes network and drawing delays. Network delays have been investigated by various researchers. However, the two methods we previously proposed ignore the order of objects in order to improve the performance. In the present work, we propose a new object assignment method that can keep the order of the drawings on the canvas while redrawing a canvas in real time. The results of experimental evaluation showed that the proposed method, called the stable layered canvas mechanism (SL), is able to achieve real-time redrawing while maintaining the order of the drawings. This mechanism enhances the availability of HTML5 Canvas for collaborative Web applications running on low performance devices such as tablets and smartphones.