Get a pixel from HTML Canvas?

by

There’s a section about pixel manipulation in the W3C documentation.

Here’s an example on how to invert an image:

var context = document.getElementById('myCanvas').getContext('2d');

// Get the CanvasPixelArray from the given coordinates and dimensions.
var imgd = context.getImageData(x, y, width, height);
var pix = imgd.data;

// Loop over each pixel and invert the color.
for (var i = 0, n = pix.length; i < n; i += 4) {
    pix[i  ] = 255 - pix[i  ]; // red
    pix[i+1] = 255 - pix[i+1]; // green
    pix[i+2] = 255 - pix[i+2]; // blue
    // i+3 is alpha (the fourth element)
}

// Draw the ImageData at the given (x,y) coordinates.
context.putImageData(imgd, x, y);

More Related Contents:

  1. Using HTML5/Canvas/JavaScript to take in-browser screenshots
  2. Capture HTML Canvas as gif/jpg/png/pdf?
  3. Resizing an image in an HTML5 canvas
  4. Maximum size of a element
  5. How To Save Canvas As An Image With canvas.toDataURL()?
  6. Zoom Canvas to Mouse Cursor
  7. Simulation background-size: cover in canvas
  8. Zoom in on a point (using scale and translate)
  9. how to save canvas as png image?
  10. Does HTML5/Canvas Support Double Buffering?
  11. HTML5 Canvas to PNG File
  12. Cross-origin data in HTML5 canvas
  13. Uploading ‘canvas’ image data to the server
  14. html 5 canvas LineTo() line color issues
  15. HTML5 Canvas camera/viewport – how to actually do it?
  16. What is the current state of the art in HTML canvas JavaScript libraries and frameworks? [closed]
  17. How to resize html canvas element?
  18. How do I rotate a single object on an html 5 canvas?
  19. Detect if user clicks inside a circle
  20. addEventListener for keydown on Canvas
  21. How to determine the intended frame-rate on an html video element
  22. Javascript function to Rotate a base 64 image by X degrees and return new base64
  23. How to save canvas animation as gif or webm?
  24. clearRect not working
  25. canvas getContext(“2d”) returns null
  26. clearing circular regions from HTML5 Canvas
  27. Is there an equivalent of canvas’s toDataURL method for SVG? [closed]
  28. HTML5 Canvas translate(0.5,0.5) not fixing line blurryness
  29. Body animation isn’t smooth
  30. Update HTML5 canvas rectangle on hover?

Leave a Comment