HTML and CSS Reference
In-Depth Information
document.body.appendChild(canvas);
var ctx = canvas.getContext("2d");
var r = 0;
(function tick() {
ctx.save();
ctx.translate(150 + Math.cos(r) * 100, 150 + Math.sin(r) * 100);
ctx.rotate(r);
ctx.scale(0.1, 0.1);
ctx.translate(-img.width / 2, -img.height / 2);
ctx.drawImage(img, 0, 0);
ctx.restore();
r += 7 * Math.PI / 180;
setTimeout(tick, 100);
})();
};
img.src = "lenna.jpg";
};
Figure 16-5.
Transform example output
When you clear the current transformation, use setTransform(1, 0, 0, 1, 0, 0); or save/restore API.
How to Gain Speed
Unfortunately, mobile devices such as smartphones or tablets are far less performant than a PC. To speed up drawing
a canvas, you have to struggle with specific optimization techniques. The most effective way is completely different
depending on game types, so I will show you some typical techniques for mobile games.
Speeding Up drawImage
Depending on game type, generally the most used API is drawImage. Browser implementations also focus on
speeding this API up; for example, modern browsers have GPU support for drawImage. Currently drawImage typically
has great performance. Due to its frequency of use, the optimizations of drawImage have led to great impact, which is
quite important for almost all games.
