Safari Books Online is a digital library providing on-demand subscription access to thousands of learning resources.
- Create BookmarkCreate Bookmark
- Create Note or TagCreate Note or Tag
- DownloadDownload
- PrintPrint
CHAPTER 9: Canvas > Image Manipulation Example
Image Manipulation Example
JavaScript always had the ability to work with images as objects via the Image() object, like this:
var img = new Image();
img.src = "/images/some.png";
Using the same mechanism you can grab an image and set it to a specific location within your <canvas>.
In the following example I'll show you how you can do more with the <canvas> elements and images than just draw things. I'll show you how to do some basic image manipulation with JavaScript, so you can manipulate images without using offline or server side logic or Flash.
Example 9-3: Follow the link below to run this example on the companion site.
The first part of this example sets everything up. First create the original image called the-cangle-lab.jpg. Add a couple of buttons: clear which will clear the canvas and gray which will cause the entire source image to be converted to grayscale.