Blog Design Development Mobile Inspiration CSS Javascript News Opinions Politics Menu

Canvas Cheat Sheet

HTML5 Canvas Cheat Sheet
HTML5 Canvas Text Font, Size, and Style Tutorial

HTML5 Canvas Image Data Tutorial

Description

To get the image data for each pixel of a rectangular area on the canvas, we can get the image data object with the getImageData() method of the canvas context and then access the pixel data from the data property.  Each pixel in the image data contains four components, a red, green, blue, and alpha component.  There are three common techniques for accessing pixel data with the image data object.

  • iterating over all of the pixels starting from the top left corner to the bottom right corner of the region
  • picking out pixel data based on x, y coordinates
  • iterating over all of the pixels while keeping track of the x, y coordinates for each pixel

Note: The getImageData() method requires that the image is hosted on a web server with the same domain as the code executing it.  If this condition is not met, a SECURITY_ERR exception will be thrown.

Demo