![Canvas Pixel Manipulation](http://devimages.apple.com/safaridemos/images/demo_canvaspixel.jpg)
Best Viewed: Safari on iOS, Mac OS X, Windows
Canvas Pixel Manipulation
This example demonstrates the power of the HTML5 <canvas> element to implement a basic image editor using standard web technologies. The <canvas> element allows you to use JavaScript to draw lines, arcs, shapes and more, directly into the web page. It also provides a way to modify the underlying pixel data for the dynamically drawn image, or take a snapshot of that image to be used elsewhere. When you take a snapshot of the image, the resulting PNG, JPG, GIF or TIFF file can be saved to any location on Mac OS X and Windows, or to the Camera Roll on iOS.
In this example:
- Image is displayed with HTML5
<canvas>
. - Pixel data is retrieved, modified, then redrawn with canvas API methods
getImageData()
andputImageData()
. - A snapshot image is generated with canvas API method
toDataURL()
.