« July 24, 2017 | Main | July 28, 2017 »

Wednesday, July 26, 2017

Reading List: HTML5 Canvas

Fulton, Steve and Jeff Fulton. HTML5 Canvas. Sebastopol, CA: O'Reilly, 2013. ISBN 978-1-4493-3498-7.
I only review computer books if I've read them in their entirety, as opposed to using them as references while working on projects. For much of 2017 I've been living with this book open, referring to it as I performed a comprehensive overhaul of my Fourmilab site, and I just realised that by now I have actually read every page, albeit not in linear order, so a review is in order; here goes.

The original implementation of World Wide Web supported only text and, shortly thereafter, embedded images in documents. If you wanted to do something as simple as embed an audio or video clip, you were on your own, wading into a morass of browser- and platform-specific details, plug-ins the user may have to install and then forever keep up to date, and security holes due to all of this non-standard and often dodgy code. Implementing interactive content on the Web, for example scientific simulations for education, required using an embedded language such as Java, whose initial bright promise of “Write once, run anywhere” quickly added the rejoinder “—yeah, right” as bloat in the language, incessant security problems, cross-platform incompatibilities, the need for the user to forever keep external plug-ins updated lest existing pages cease working, caused Java to be regarded as a joke—a cruel joke upon those who developed Web applications based upon it. By the latter half of the 2010s, the major browsers had either discontinued support for Java or announced its removal in future releases.

Fortunately, in 2014 the HTML5 standard was released. For the first time, native, standardised support was added to the Web's fundamental document format to support embedded audio, video, and interactive content, along with Application Programming Interfaces (APIs) in the JavaScript language, interacting with the document via the Document Object Model (DOM), which has now been incorporated into the HTML5 standard. For the first time it became possible, using only standards officially adopted by the World Wide Web Consortium, to create interactive Web pages incorporating multimedia content. The existence of this standard provides a strong incentive for browser vendors to fully implement and support it, and increases the confidence of Web developers that pages they create which are standards-compliant will work on the multitude of browsers, operating systems, and hardware platforms which exist today.

(That encomium apart, I find much to dislike about HTML5. In my opinion its sloppy syntax [not requiring quotes on tag attributes nor the closing of many tags] is a great step backward from XHTML 1.0, which strictly conforms to XML syntax and can be parsed by a simple and generic XML parser, without the Babel-sized tower of kludges and special cases which are required to accommodate the syntactic mumbling of HTML5. A machine-readable language should be easy to read and parse by a machine, especially in an age where only a small minority of Web content creators actually write HTML themselves, as opposed to using a content management system of some kind. Personally, I continue to use XHTML 1.0 for all content on my Web site which does not require the new features in HTML5, and I observe that the home page of the World Wide Web Consortium is, itself, in XHTML 1.0 Strict. And there's no language version number in the header of an HTML5 document. Really—what's up with that? But HTML5 is the standard we've got, so it's the standard we have to use in order to benefit from the capabilities it provides: onward.)

One of the most significant new features in HTML5 is its support for the Canvas element. A canvas is a rectangular area within a page which is treated as an RGBA bitmap (the “A” denotes “alpha”, which implements transparency for overlapping objects). A canvas is just what its name implies: a blank area on which you can draw. The drawing is done in JavaScript code via the Canvas API, which is documented in this book, along with tutorials and abundant examples which can be downloaded from the publisher's Web site. The API provides the usual functions of a two-dimensional drawing model, including lines, arcs, paths, filled objects, transformation matrices, clipping, and colours, including gradients. A text API allows drawing text on the canvas, using a subset of CSS properties to define fonts and their display attributes.

Bitmap images may be painted on the canvas, scaled and rotated, if you wish, using the transformation matrix. It is also possible to retrieve the pixel data from a canvas or portion of it, manipulate it at low-level, and copy it back to that or another canvas using JavaScript typed arrays. This allows implementation of arbitrary image processing. You might think that pixel-level image manipulation in JavaScript would be intolerably slow, but with modern implementations of JavaScript in current browsers, it often runs within a factor of two of the speed of optimised C code and, unlike the C code, works on any platform from within a Web page which requires no twiddling by the user to build and install on their computer.

The canvas API allows capturing mouse and keyboard events, permitting user interaction. Animation is implemented using JavaScript's standard setTimeout method. Unlike some other graphics packages, the canvas API does not maintain a display list or refresh buffer. It is the responsibility of your code to repaint the image on the canvas from scratch whenever it changes. Contemporary browsers buffer the image under construction to prevent this process from being seen by the user.

HTML5 audio and video are not strictly part of the canvas facility (although you can display a video on a canvas), but they are discussed in depth here, each in its own chapter. Although the means for embedding this content into Web pages are now standardised, the file formats for audio and video are, more than a quarter century after the creation of the Web, “still evolving”. There is sage advice for developers about how to maximise portability of pages across browsers and platforms.

Two chapters, 150 pages of this 750 page book (don't be intimidated by its length—a substantial fraction is code listings you don't need to read unless you're interested in the details), are devoted to game development using the HTML5 canvas and multimedia APIs. A substantial part of this covers topics such as collision detection, game physics, smooth motion, and detecting mouse hits in objects, which are generic subjects in computer graphics and not specific to its HTML5 implementation. Reading them, however, may give you some tips useful in non-game applications.

Projects at Fourmilab which now use HTML5 canvas are:

Numerous other documents on the site have been updated to HTML5, using the audio and video embedding capabilities described in the book.

All of the information on the APIs described in the book is available on the Web for free. But you won't know what to look for unless you've read an explanation of how they work and looked at sample code which uses them. This book provides that information, and is useful as a desktop reference while you're writing code.

A Kindle edition is available, which you can rent for a limited period of time if you only need to refer to it for a particular project.

Posted at 13:30 Permalink