- Introducing Animated Starry Diorama
- Playing ASD Audio Without the Audio Element
- Adapting ASD's Canvas to Cover the Browser's Client Area
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Adapting ASD's Canvas to Cover the Browser's Client Area
ASD's canvas is somewhat small, and it would be nice to have this canvas occupy the browser's entire client area. Fortunately, for at least the browsers that I'm targeting in this series, this problem is easily addressed by taking advantage of the clientWidth and clientHeight properties of the DOM's document.body object. These properties return the width and height of the client area.
It's easy to adapt Listing 1's ASD.html file to accommodate these properties. Replace var WIDTH = 720; with var WIDTH = document.body.clientWidth;, and var HEIGHT = 480; with var HEIGHT = document.body.clientHeight;. While you're at it, assign the style="margin: 0" attribute to the <body> tag to eliminate the margin surrounding the client area. Figure 2 shows the result.
)
Figure 2 ASD occupies Safari's entire client area. Click to enlarge.
Conclusion
ASD is a simple example of an HTML5 application that detects the current browser and adapts itself to the browser's HTML5 limitations. Although not much was required to adapt this application to a browser's HTML5 limitations, because ASD only runs in the context of certain browsers that already provide the needed HTML5 features, the final article in this series will focus more on creating an adaptable application. Specifically, Part 3's HTML5 application will need to work with PHP to overcome File API limitations.