Chapter 4. Images and Video

HTML5 Canvas provides extensive support for images. You can draw all or part of an image, scaled or unscaled, anywhere inside a canvas, and you can access and manipulate the color and transparency of each pixel. And by combining image manipulation with other aspects of the Canvas API such as clipping regions and offscreen canvases, you can create stunning effects, such as animations and multiplayer games, data visualization, or particle physics simulations.

Figure 4.1 shows a magnifying glass that demonstrates some of what’s possible with Canvas image manipulation. As you drag the magnifying glass, the application scales the pixels underneath the magnifying glass, and draws them back into the canvas, clipped to the ...

Get Core HTML5 Canvas: Graphics, Animation, and Game Development now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.