Working with underlying pixels in the HTML5 canvas

HTML5 developer can gain access to individual pixel in the canvas. The way it is accomplished is via a numerical array. You can modify these pixels and then apply back to canvas. 

There are three main functions in HTML5 that can help you accomplish this task

  • context.getImageData(sx, sy, sw, sh)
  • context.putImageData(imagedata, dx, dy)
  • context.createImageData(sw, sh)

Let’s take a closer look at how these functions are utilized by the HTML5 in order to gain access to pixels in the canvas.

context.getImageData(sx, sy, sw, sh) - function has current state of the canvas. It contains a collection of integers. Each object in the array has other properties that are accessible to HTML5 developer: width, heigh and data. Data property has four values each for four color components (red, blue, green and alpha). getImageData function returns information that relates to the region set in the arguments of this function call and limited by this parameters as a result. However, it is easy to update values that are being return as they are 0 to 255 range integer values.

context.putImageData(imagedata, dx, dy) - function is used to update the canvas with the modified pixilation information or image alpha information. putImageData passes modified data in the same format as it retrieved with your modification back to canvas.

context.createImageData(sw, sh) - function creates new image data on the canvas. Data that is being used to create image can be programmatically accessed and modified.

Featured pages


Learn about HTML5 architecture, design principles and patterns on HTML5 Overview Tutorial. Become …


Learn about HTML5 tags and discover a new list of HTML5 tags. Find out about HTML5 tags support by…


 Learn HTML5 development techniques, tips and tricks on our website. Find out what is required…

Date Time Picker

HTML5 forms use date and time controls regularly. HTML5 date and time controls are used by booking …