Manipulating Canvas Pixel Data with JavaScript

The HTML5 canvas API exposes methods for drawing simple shapes on a canvas, and there are several libraries out there that provide high-level abstractions to make drawing complicated shapes easier (e.g. Fabric.js). Sometimes, though, you may need to manipulate your image's pixel data directly. This requires a low-level canvas API and isn't very intuitive - so in this post, I'll explain how it works.