Safari Technology Demos

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

Related Resources