Image Processing 1. Introduction

In this introductory article I'll explain how color is encoded in computer graphics, make you work a bit with bits, and show how to manipulate pixels a better way in JavaScript.

Color#

In the physical world color is a wave, while in the digital world it's most often a number. There're many ways to represent color, some of which I'll cover in future articles, but today, we'll focus on the most common one: RGB.

In RGB, color is represented as a combination of the brightness of three components: RED, GREEN, and BLUE. Minimum brightness of all three components gives us black; maximum brightness of only red, of course, gives pure red; and maximum brightness of all three components gives white.

Minimum and maximum brightness can be represented in different ways:

• As percentages (0% = minimum, 100% = maximum)
• As decimal values (0.0 = minimum, 1.0 = maximum)
• As a single-byte range (0 = minimum, 255 = maximum)

Among these three methods, the third method is optimal for practical work. Compared to percentages, it offers a wider range, and unlike decimals, it uses integers. This byte-range approach has become the standard for RGB color representation.

Transparency#

In addition to the three color components, there's an additional component for transparency, called the alpha channel (A). The minimum value (0%, 0.0, 0) indicates full transparency, while the maximum (100%, 1.0, 255) means full opaque.

Color Representation Methods#

Combining three (or four) components gives us information about color (and transparency). But what does "combining" mean? In LED indicators, it's three physical diodes (you guessed which colors). In computer graphics, we combine color components in various ways:

• No combination: Store them sequentially in an array.
• Bitwise combination: Pack into a single number (24-bit for RGB, 32-bit with alpha).

In both cases, it's important to know the order of the components. Common formats include:

• RGB (Red → Green → Blue)
• ARGB (Alpha → Red → Green → Blue)
• RGBA (Red → Green → Blue → Alpha)
• BGR (Blue → Green → Red)
• BGRA (Blue → Green → Red → Alpha)

How are components packed into a single number? Recall bitwise operations:
256 red values (0–255) × 256 green × 256 blue = 16,777,216 colors.
16,777,216 colors × 256 alpha values = 4,294,967,296 total values.
This is exactly how much a 32-bit unsigned integer includes.

It's encoded as follows:

ARGB: 00000000000000000000000000000000

(alpha << 24) | (red << 16) | (green << 8) | blue

ABGR: 00000000000000000000000000000000

(alpha << 24) | (blue << 16) | (green << 8) | red

RGBA: 00000000000000000000000000000000

(red << 24) | (green << 16) | (blue << 8) | alpha

For convenience, these colors are often written in hexadecimal. For example, ARGB:
#AAFF0088 → AA (170) = alpha, FF (255) = red, 00 = green, 88 (136) = blue.

Working with Color in JavaScript#

Let's dive into the depths and work with color in JavaScript without libraries.

// Get canvas, its dimensions, and context
const canvas = document.getElementById('canvas');
const width = canvas.width;
const height = canvas.height;
const ctx = canvas.getContext('2d');

// Get pixel data. Format: { data: [], width: xx, height: yy }
const img = ctx.getImageData(0, 0, width, height);
const pixels = img.data;

// Process
// pixels[...] = ...

ctx.putImageData(img, 0, 0);

By default, JavaScript stores components sequentially: pixels[0] = red, pixels[1] = green, pixels[2] = blue, pixels[3] = alpha. This method is slow, so it's recommended to use Uint32Array, which packs components into a 32-bit ABGR integer.

const canvas = document.getElementById('canvas');
const width = canvas.width;
const height = canvas.height;
const ctx = canvas.getContext('2d');

const img = ctx.getImageData(0, 0, width, height);
const pixels = new Uint32Array(img.data.buffer);

// Process
// pixels[...] = ...

ctx.putImageData(img, 0, 0);

Here is an example of filling the canvas with red, green, and blue colors first with full opacity (A = 255), and then with semi-transparency (A = 128).