HTML and CSS Reference
In-Depth Information
CHAPTER 4
Images on the Canvas
Like the Canvas Drawing API, the Canvas Image API is very robust. With it, we can
load in image data and apply it directly to the canvas. This image data can also be cut
and spliced to display any desired portion. Furthermore, Canvas gives us the ability to
store arrays of pixel data that we can manipulate and then draw back to the canvas.
There are two primary Canvas functions we can perform with images. We can display
images, and we can modify them pixel by pixel and paint them back to the canvas.
There are only a few Image API functions, but they open up a world of pixel-level
manipulation that gives the developer the power to create optimized applications di-
rectly in the web browser without needing any plug-ins.
The Basic File Setup for This Chapter
All the examples in this chapter will use the same basic file setup for displaying our
demonstrations as we proceed through the Drawing API. Use the following as the basis
for all the examples we create—you will only need to change the contents of the
drawScreen()
function:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ch4BaseFile - Template For Chapter 4 Examples</title>
<script src="modernizr-1.6.min.js"></script>
<script type="text/javascript">
window.addEventListener('load', eventWindowLoaded, false);
function eventWindowLoaded() {
canvasApp();
}
function canvasSupport () {
return Modernizr.canvas;
}
