Canvas Cheat Sheet

HTML5 Canvas Invert Image Colors Tutorial

Discussion

To invert the colors of an image with HTML5 Canvas, we can iterate over all of the pixels in the image and invert the red, green, and blue components by subtracting each component from the max color value, 255. Next, we can redraw the inverted image using the updated image data with the putImageData() method, which requires an image data array and a position.

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.