HTML and CSS Reference
In-Depth Information
Figure 16-12.
Separate RGB channels output
This method is slow because it invokes drawImage seven times, but it's much faster than put/getImageData. If you
want more speed, it's good idea to cache each channel. With cached channels, you can make a fading colors animation.
Optimization on Drawing Paths
Some games use Paths a lot. When you are planning to support vector images on your game engine, it's especially
important to draw Paths fast.
If your target browsers support the Path object (such as on iOS7), you may use it aggressively. With the Path
object, you can reuse the shape of a drawing. But please note that currently quite a few browsers support the Path
object, so it's better to check that your target browsers are supporting the Path object before using it.
It is common to build Paths from outside data sources like JSON. In this case, you don't need to parse and build
draw functions every time you need them. With
new Function
, you can reduce the overhead drastically.
Listing 16-13 generates the drawing code in Listing 16-14.
Listing 16-13.
Generating JavaScript Codes
onload = function() {
var canvas = document.createElement("canvas");
canvas.width = canvas.height = 300;
document.body.appendChild(canvas);
var ctx = canvas.getContext("2d");
var svg = ("M 51.35 38.55 L 30.35 0 L 21 0 L 0 38.55 L 8.3 38.55" +
" L 12.7 30.3 L 38.65 30.3 L 43.05 38.55 L 51.35 38.55" +
" M 34.9 23.5 L 16.5 23.5 L 25.7 6.45 L 34.9 23.5").split(" ");
