HTML and CSS Reference
In-Depth Information
if (document.createElement('canvas').getContext) {
console.log("Success! The canvas element is supported.");
}
This code creates a new canvas element and tests for the existence of its
getContext
property, which the
object has if it's a valid HTML5 canvas element. If the browser does have support, it prints a message to
the debugging console letting you know.
Table 2-1 lists the most popular web browsers and the minimum version required for basic support of the
canvas element.
Table 2-1.
Canvas Element Support for the Major Browsers
IE
Firefox
Safari
Chrome
Opera
iOS Safari
Android Browser
9
3.5
3.2
9
10.6
3.2
2.1
Performance
Programming graphics has always been—and for the foreseeable future, will be—a very computationally
demanding operation. The reason is simple: The more you can do, the more you want to do and the more
demands you place on the performance of the system. The past 25 years of video game history has been
an amazing journey of technical advances, evolving from the blocky characters featured in dedicated
arcade machines, to fully immersive 3D worlds run on today's consoles. But still, we want more.
Sometimes we judge computer animation against features of the natural world: character realism, lighting
effects, and physics. It's quite a marvel that these simulations can hold up to the scrutiny of human
perception, and yet, they often do. We're still at the dawn of computer animation, and as long as
computers keep getting faster—with the help of Moore's Law—and developers keep refining their
techniques, our abilities for visual creation in the future seem almost unlimited.
But animation on the web using the canvas element is at the incubation stage, only now considered a
viable alternative to using plug-ins like Adobe Flash. In recent years, developers have pushed the
boundaries of speed and performance in web browsers and JavaScript engines, and because this is still a
highly competitive area, we can look forward to more optimizations and improvements to come.
The examples in this topic are written so they run at a smooth, reasonable performance on a relatively
modern computer and web browser. The capability of your computer will differ from mine, so as you
examine the source code in this topic, feel free to adjust the values so the examples run smoothly on your
machine. Plus, there is no better way to learn how the formulas work than by experimenting with their
parameters and observing the output.
However, before you share any animations with the world, test them on as many different devices as you
can. As more people use mobile phones and tablets—instead of more traditional desktop computers—to
access the web, developers need to account for a wide range of device performance differences. Testing
and measuring on all these platforms is the only way to ensure your code remains performant.
