Hacking HTML5 Canvas to Create a Stereo 3D Renderer Diego González-Zúñiga* Jordi Carrabina* Centre d'Accessibilitat i Intel·ligència Ambiental de Catalunya, Universitat Autònoma de Barcelona, 08193, Spain ABSTRACT In this article, we present a drawing toolkit developed to create stereoscopic side-by-side 3D stimuli. The toolkit is based in the HTML5 canvas element and drawing is achieved using intermediate stereo scripting methods that correspond to the ‘2d’ context of the canvas. We include performance marks of the toolkit running on desktop and mobile browsers. Also, a discussion of how the tool is used for implementing a stereo 3D UI is specified. Keywords: Graphical user interfaces, Web-based 3D, User interface programming, User interface toolkits, 3D. Index Terms: H.5 [Information Interfaces and Presentation]; H.5.2 [User Interfaces]: GUI; H.m [Miscellaneous]. 1 INTRODUCTION The current year saw the completion of the fifth revision of the Hypertext Markup Language by the World Wide Web Consortium. It is now in a recommendation status [1]. This revision introduces syntactic features related to multimedia objects [2]. Part of the newly defined tags are <video>, <audio> and <canvas>. As their names imply, they are designed to facilitate the inclusion and management of multimedia content on the web. It is implemented in a way that the markup maintains its readability and consistency among devices. The current year also saw the rise of new imaging formats (HDR, UHD, HFR), relieving 3D from its novel research interest and exposing a platform on which to display stereo content (stereo capable devices). Even though 3D is generally reserved for films and games, there has been research where depth is brought to the software and application space, both for mobile [3], automotive [4], and web [5]. Either for semantic purposes [5], handling big/dense data scenarios [6] or plain aesthetics, the stereo effect can benefit a user interface. Nonetheless, tools for development of stereo stimuli are not easily available. We present a drawing toolkit based on HTML5 Canvas scripting that allows the creation of interactive stereoscopic content and GUIs. 2 STATE OF THE TECHNOLOGY 2.1 Canvas The canvas element is a revolutionary feature present in HTML5 that enables powerful graphics for rich Internet Applications. It represents a resolution-dependent bitmap canvas, which can be used for rendering graphs, game graphics, or other visual images on the fly. Its use consists in a JavaScript API for drawing in an HTML canvas tag. 2.2 Stereoscopic 3D Stereoscopic visualizations, as their name imply, denote the visualizations that are created by the fusion of a pair of stereo images. This fusion allows us to understand the layout of our surrounding world from a scene created in our brains using visual depth cues. We can extract depth information from the comparison between the two eyes’ points of view. This is the core concept behind 3D, and the creation of traditional stereoscopic stimuli must vary only in the horizontal shift present among elements in the scene, view or composition. 3 BENEFITS We chose HTML5’s canvas element to create the stereoscopic compositions because we immediately gain compatibility with a broad scope of HTML5 devices. Also, the library being written in JavaScript allows for interaction with other scripts and diverse input devices that feature a JavaScript API. Among these devices we can mention the Kinect and the Motion LEAP. 4 CHALLENGES The challenges that we faced when building stereoscopic visualizations are related to the duplication of the view. In the ‘2d’ context, canvas creates paths for its drawings by clearly beginning a path, moving to different positions in the drawing space and closing the path. This makes it impossible to duplicate anything in the canvas since a path can be only started and closed once, and we needed to duplicate the drawing. We could not draw one visualization after the other either, because it would not be dynamic nor allow for animations. Both drawings need to be drawn at the same time, or what is closest to this concept. Yet another challenge was keeping the performance as high as possible, especially for animation purposes. 5 SXS 3D CNV The code name for our drawing toolkit is SXS3DCNV (Side by Side 3D Canvas). As it states, we are working on generating side by side stimuli. This responds to the fact that it is a spread format on stereo displays and televisions, which are our main means for showing prototype GUIs to test subjects. The way the 3D depth is obtained is by shifting different elements horizontally, and this offset is specified in each one of the methods that draw elements on the canvas. The implementation works optimally in full screen displays, independent of resolution, as long as this resolution does not change. The drawing toolkit is a JavaScript file that can easily be imported to any webpage. Then another file that contains the user’s drawing is set as source. SXS3DCNV defines a set of functions that draw on a canvas (or set of canvases) stereoscopically. Every ‘2d’ context method has a stereo counterpart. These ‘stereo’ methods, * diekus@acm.org, jordi.carrabina@uab.cat