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() and putImageData().
• A snapshot image is generated with canvas API method toDataURL().

Related Resources

• Safari HTML Reference
• WebKit DOM Reference
• WebKit DOM Programming Topics: Using the Canvas
• Making Graphics With Canvas on iPhone