- 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.
July 2017 