Canvas Image Manipulation Get Certified
The <canvas> element gives JavaScript direct access to individual pixels. That is the foundation behind filters like grayscale, invert, brightness, and pixelation.
Creating a Canvas and Drawing Shapes
A canvas starts blank. Its 2D context gives you drawing methods like fillRect(), arc(), and gradients. Every filter in this lesson starts with this same setup.
What this code does: Creates a 300×200 canvas in memory, fills it with a dark blue background, paints an orange gradient band across the top, and draws a yellow circle in the lower half. It then prints the canvas size and shows the finished picture below the text output. Use it to learn the three basic steps of every canvas program: create the canvas, get the context, draw.
// Helper: shows a copy of a canvas below the text output
function showCanvas(label, source) {
const copy = document.createElement("canvas");
copy.width = source.width;
copy.height = source.height;
copy.getContext("2d").drawImage(source, 0, 0);
copy.style.maxWidth = "100%";
setTimeout(() => {
const box = document.createElement("div");
box.className = "demo-canvas-box";
box.innerHTML = "<p class='demo-canvas-label'>" + label + "</p>";
box.appendChild(copy);
document.getElementById("previewContent").appendChild(box);
}, 0);
}
const canvas = document.createElement("canvas");
canvas.width = 300;
canvas.height = 200;
const ctx = canvas.getContext("2d");
// Background
ctx.fillStyle = "#1e3a5f";
ctx.fillRect(0, 0, 300, 200);
// Gradient band
const gradient = ctx.createLinearGradient(0, 0, 300, 0);
gradient.addColorStop(0, "#ff7e5f");
gradient.addColorStop(1, "#feb47b");
ctx.fillStyle = gradient;
ctx.fillRect(20, 20, 260, 60);
// Circle
ctx.beginPath();
ctx.arc(150, 130, 40, 0, Math.PI * 2);
ctx.fillStyle = "#ffe66d";
ctx.fill();
console.log("Canvas created:", canvas.width + "x" + canvas.height);
console.log("Scene drawn: gradient band + yellow circle on dark background");
showCanvas("Result: shapes drawn on the canvas", canvas);This helper is not part of the lesson; it only makes the picture visible. It receives a label and a canvas, creates a second canvas of the same size, and uses drawImage() to paste a snapshot of the source into it. Copying at this moment matters: later examples call the helper before and after a filter, and each call keeps its own snapshot.
setTimeout(…, 0) waits until the text logs have been printed, so the picture appears below the text output. Inside it, a div (class demo-canvas-box) holds a caption and the canvas copy, and is added to the Console Output area (id previewContent).
createElement(“canvas”) builds a canvas that lives only in memory. Width and height are set in pixels (300×200 = 60,000 pixels). getContext(“2d”) returns the drawing tool (ctx); every drawing call and every pixel operation goes through it.
fillStyle sets the colour used by the next fill. fillRect(x, y, width, height) then paints a rectangle; starting at (0, 0) with the full 300×200 size covers the whole canvas.
createLinearGradient(0, 0, 300, 0) defines a gradient that runs from x=0 to x=300 (left to right, same y). addColorStop(position, colour) sets the colour at the start (0) and end (1). A gradient can be used as a fillStyle, so fillRect(20, 20, 260, 60) paints a band that blends from orange to light orange.
beginPath() starts a new shape. arc(150, 130, 40, 0, Math.PI * 2) means: centre (150, 130), radius 40, from angle 0 to 2π radians, which is a full circle. fill() paints it with the yellow fillStyle.
These lines appear in the text part of the Console Output. Canvas pixels cannot be printed as text, which is why the picture is shown separately.
Calls the helper so the finished canvas appears below the text output.
Grayscale With getImageData() / putImageData()
getImageData() returns the raw pixel array (four numbers per pixel: red, green, blue, alpha). Averaging the red, green, and blue values of each pixel removes colour.
What this code does: Draws five coloured vertical stripes, then reads every pixel with getImageData(). For each pixel it averages the R, G, and B values and writes that same number back to all three channels, so every colour becomes a shade of gray. The result is written back with putImageData(). The output shows the picture before and after the filter, plus how many pixels were processed (300 × 200 = 60,000).
// Helper: shows a copy of a canvas below the text output
function showCanvas(label, source) {
const copy = document.createElement("canvas");
copy.width = source.width;
copy.height = source.height;
copy.getContext("2d").drawImage(source, 0, 0);
copy.style.maxWidth = "100%";
setTimeout(() => {
const box = document.createElement("div");
box.className = "demo-canvas-box";
box.innerHTML = "<p class='demo-canvas-label'>" + label + "</p>";
box.appendChild(copy);
document.getElementById("previewContent").appendChild(box);
}, 0);
}
const canvas = document.createElement("canvas");
canvas.width = 300;
canvas.height = 200;
const ctx = canvas.getContext("2d");
// Draw five coloured stripes, each 60px wide
const colors = ["#e63946", "#f1c453", "#2a9d8f", "#264653", "#e76f51"];
colors.forEach((color, i) => {
ctx.fillStyle = color;
ctx.fillRect(i * 60, 0, 60, 200);
});
function toGrayscale(ctx, width, height) {
const imageData = ctx.getImageData(0, 0, width, height);
const pixels = imageData.data;
let count = 0;
for (let i = 0; i < pixels.length; i += 4) {
const avg = (pixels[i] + pixels[i + 1] + pixels[i + 2]) / 3;
pixels[i] = avg;
pixels[i + 1] = avg;
pixels[i + 2] = avg;
count++;
}
ctx.putImageData(imageData, 0, 0);
return count;
}
showCanvas("Before: original colours", canvas);
const processed = toGrayscale(ctx, canvas.width, canvas.height);
showCanvas("After: grayscale", canvas);
console.log("Grayscale filter applied");
console.log("Pixels processed:", processed);
console.log("Expected pixels:", canvas.width * canvas.height);Not part of the lesson. It takes a snapshot of the canvas at the moment it is called, so we can show the picture both before and after the filter.
Waits until the text output is printed, then adds the caption and the snapshot below it in the Console Output area.
Creates a 300×200 canvas and gets its 2D context. All later drawing and pixel work uses ctx.
The colors array holds five hex colours. forEach gives each colour and its position i (0 to 4). Each stripe is 60px wide, so fillRect(i * 60, 0, 60, 200) places stripe 0 at x=0, stripe 1 at x=60, and so on until the five stripes fill the 300px width.
ctx.getImageData(0, 0, width, height) copies every pixel in the rectangle into an ImageData object. Its .data property is one long flat array. count will track how many pixels we change.
Each pixel uses four array slots: [red, green, blue, alpha]. Pixel 0 is at positions 0-3, pixel 1 at 4-7, and so on. Stepping i by 4 lands on the red value of each pixel.
pixels[i] is red, pixels[i + 1] is green, pixels[i + 2] is blue. Adding them and dividing by 3 gives one brightness value from 0 to 255. (Photo editors use a weighted formula because the eye sees green as brighter, but the plain average is easier to learn.)
When red, green, and blue are equal, the colour is a gray. The alpha slot (i + 3) is not touched, so transparency stays the same.
Adds 1 for every pixel processed, giving us a number to print at the end.
Changing the array does nothing visible by itself. putImageData(imageData, 0, 0) draws the modified pixels onto the canvas starting at the top-left corner. The function then returns the count.
The canvas is shown first (colours), then toGrayscale() runs, then it is shown again (gray). Because the helper makes a snapshot on each call, the two pictures are different.
Prints a confirmation, the pixels processed, and the expected number (width × height). Both numbers are 60,000, proving that every pixel was visited exactly once.
Inverting Colors
Inverting is simple: subtract each colour channel from 255. Bright colours become dark and the other way round.
What this code does: Draws a row of six overlapping circles, each with a different hue on a cream background. It then replaces every red, green, and blue value with 255 minus the old value, which creates the “photo negative” look. The output shows the picture before and after, and prints two sample calculations so you can see the arithmetic.
// Helper: shows a copy of a canvas below the text output
function showCanvas(label, source) {
const copy = document.createElement("canvas");
copy.width = source.width;
copy.height = source.height;
copy.getContext("2d").drawImage(source, 0, 0);
copy.style.maxWidth = "100%";
setTimeout(() => {
const box = document.createElement("div");
box.className = "demo-canvas-box";
box.innerHTML = "<p class='demo-canvas-label'>" + label + "</p>";
box.appendChild(copy);
document.getElementById("previewContent").appendChild(box);
}, 0);
}
const canvas = document.createElement("canvas");
canvas.width = 300;
canvas.height = 200;
const ctx = canvas.getContext("2d");
ctx.fillStyle = "#f4f1de";
ctx.fillRect(0, 0, 300, 200);
for (let i = 0; i < 6; i++) {
ctx.beginPath();
ctx.arc(50 + i * 45, 100, 25, 0, Math.PI * 2);
ctx.fillStyle = `hsl(${i * 60}, 70%, 55%)`;
ctx.fill();
}
function invertColors(ctx, width, height) {
const imageData = ctx.getImageData(0, 0, width, height);
const pixels = imageData.data;
for (let i = 0; i < pixels.length; i += 4) {
pixels[i] = 255 - pixels[i];
pixels[i + 1] = 255 - pixels[i + 1];
pixels[i + 2] = 255 - pixels[i + 2];
}
ctx.putImageData(imageData, 0, 0);
}
showCanvas("Before: original colours", canvas);
invertColors(ctx, canvas.width, canvas.height);
showCanvas("After: inverted", canvas);
console.log("Invert filter applied");
console.log("Example: white (255) becomes", 255 - 255, "and black (0) becomes", 255 - 0);Not part of the lesson. Takes a snapshot of the canvas when called, so the before and after pictures can both be shown.
Waits for the text output, then adds the caption and the snapshot below it in the Console Output area.
Creates a 300×200 canvas and gets the 2D drawing context.
Fills the whole canvas with a cream colour so the inversion is easy to see (cream turns into a dark blue-gray).
The loop runs with i = 0 to 5. Each circle’s x position is 50 + i * 45, so they are spaced 45px apart; with a radius of 25 (diameter 50) neighbours overlap slightly. The template string hsl(${i * 60}, 70%, 55%) gives hue 0, 60, 120 … 300, which walks around the colour wheel (red, yellow, green, cyan, blue, magenta).
Declares the function and fetches the pixel array: a flat list of [R, G, B, A, R, G, B, A, …].
Moves from one pixel to the next by jumping four slots, landing on each red value.
Each channel runs from 0 to 255, so 255 minus the value flips it: 0 becomes 255, 255 becomes 0, and 100 becomes 155. The alpha value (i + 3) is skipped on purpose, otherwise opaque pixels would turn transparent.
putImageData draws the changed pixels back onto the canvas. Without this line the canvas would not change.
Shows the original, applies the filter, then shows the inverted result.
Prints a confirmation and two sample calculations of the formula (255 – 255 = 0 and 255 – 0 = 255).
Adjusting Brightness
Brightening or darkening means adding (or subtracting) a fixed amount from every colour channel, then keeping the result between 0 and 255.
What this code does: Draws a dark gradient with a red rectangle in the middle, then adds 70 to the red, green, and blue value of every pixel. Math.min and Math.max keep each result between 0 and 255. The output shows the scene before and after, so you can compare how much lighter it becomes. Try changing 70 to a negative number such as -70 to darken it instead.
// Helper: shows a copy of a canvas below the text output
function showCanvas(label, source) {
const copy = document.createElement("canvas");
copy.width = source.width;
copy.height = source.height;
copy.getContext("2d").drawImage(source, 0, 0);
copy.style.maxWidth = "100%";
setTimeout(() => {
const box = document.createElement("div");
box.className = "demo-canvas-box";
box.innerHTML = "<p class='demo-canvas-label'>" + label + "</p>";
box.appendChild(copy);
document.getElementById("previewContent").appendChild(box);
}, 0);
}
const canvas = document.createElement("canvas");
canvas.width = 300;
canvas.height = 200;
const ctx = canvas.getContext("2d");
const gradient = ctx.createLinearGradient(0, 0, 300, 200);
gradient.addColorStop(0, "#2b2d42");
gradient.addColorStop(1, "#8d99ae");
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, 300, 200);
ctx.fillStyle = "#ef233c";
ctx.fillRect(100, 60, 100, 80);
function adjustBrightness(ctx, width, height, amount) {
const imageData = ctx.getImageData(0, 0, width, height);
const pixels = imageData.data;
for (let i = 0; i < pixels.length; i += 4) {
pixels[i] = Math.min(255, Math.max(0, pixels[i] + amount));
pixels[i + 1] = Math.min(255, Math.max(0, pixels[i + 1] + amount));
pixels[i + 2] = Math.min(255, Math.max(0, pixels[i + 2] + amount));
}
ctx.putImageData(imageData, 0, 0);
}
showCanvas("Before: dark scene", canvas);
adjustBrightness(ctx, canvas.width, canvas.height, 70);
showCanvas("After: brightness +70", canvas);
console.log("Brightness adjusted by +70");
console.log("Each channel clamped between 0 and 255");Not part of the lesson. Takes a snapshot of the canvas when called, so before and after can both be shown.
Waits for the text output, then adds the caption and the snapshot below it in the Console Output area.
Creates a 300×200 canvas and gets the 2D drawing context.
The gradient runs from the top-left corner (0, 0) to the bottom-right corner (300, 200). It starts at a very dark navy (#2b2d42) and ends at a medium gray-blue (#8d99ae). Using it as fillStyle paints the whole canvas.
A 100×80 red rectangle placed at (100, 60), roughly in the centre. A strong colour makes the brightness change easy to notice.
adjustBrightness takes an amount: positive makes the image lighter, negative makes it darker. It reads the pixel array as in the previous examples.
Visits each pixel by jumping over its [R, G, B, A] group.
Read from the inside out: pixels[i] + amount adds the brightness; Math.max(0, …) stops the value going below 0; Math.min(255, …) stops it going above 255. Example: 230 + 70 = 300 becomes 255. Note: imageData.data is a Uint8ClampedArray, which clamps automatically, but writing the clamp yourself is a good habit and is required if you ever use a normal array.
Draws the brighter pixels onto the canvas.
Shows the dark scene, applies +70, then shows the lighter scene. The red rectangle also gets lighter because red, green, and blue all increase.
Confirms the amount used and reminds you that each channel stays within 0-255.
A Pixelation Effect
Pixelation divides the image into square blocks, averages the colour inside each block, then fills the whole block with that average colour.
What this code does: Draws a three-colour gradient with a yellow circle, then splits the canvas into 15×15 pixel blocks. For each block it adds up the red, green, and blue values of all its pixels, divides by the pixel count to get an average colour, and paints the block with that single colour. The output shows the smooth picture before and the blocky picture after, and compares the number of blocks created with the number you would expect.
// Helper: shows a copy of a canvas below the text output
function showCanvas(label, source) {
const copy = document.createElement("canvas");
copy.width = source.width;
copy.height = source.height;
copy.getContext("2d").drawImage(source, 0, 0);
copy.style.maxWidth = "100%";
setTimeout(() => {
const box = document.createElement("div");
box.className = "demo-canvas-box";
box.innerHTML = "<p class='demo-canvas-label'>" + label + "</p>";
box.appendChild(copy);
document.getElementById("previewContent").appendChild(box);
}, 0);
}
const canvas = document.createElement("canvas");
canvas.width = 300;
canvas.height = 200;
const ctx = canvas.getContext("2d");
const gradient = ctx.createLinearGradient(0, 0, 300, 200);
gradient.addColorStop(0, "#06d6a0");
gradient.addColorStop(0.5, "#118ab2");
gradient.addColorStop(1, "#ef476f");
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, 300, 200);
ctx.beginPath();
ctx.arc(150, 100, 60, 0, Math.PI * 2);
ctx.fillStyle = "#ffd166";
ctx.fill();
function pixelate(ctx, width, height, blockSize) {
let blocks = 0;
for (let y = 0; y < height; y += blockSize) {
for (let x = 0; x < width; x += blockSize) {
const w = Math.min(blockSize, width - x);
const h = Math.min(blockSize, height - y);
const blockData = ctx.getImageData(x, y, w, h).data;
let r = 0, g = 0, b = 0, count = 0;
for (let i = 0; i < blockData.length; i += 4) {
r += blockData[i];
g += blockData[i + 1];
b += blockData[i + 2];
count++;
}
ctx.fillStyle = `rgb(${Math.round(r / count)}, ${Math.round(g / count)}, ${Math.round(b / count)})`;
ctx.fillRect(x, y, w, h);
blocks++;
}
}
return blocks;
}
showCanvas("Before: smooth image", canvas);
const totalBlocks = pixelate(ctx, canvas.width, canvas.height, 15);
showCanvas("After: 15px pixelation", canvas);
console.log("Pixelation applied with 15px blocks");
console.log("Total blocks created:", totalBlocks);
console.log("Expected:", Math.ceil(300 / 15) * Math.ceil(200 / 15));Not part of the lesson. Takes a snapshot of the canvas when called, so before and after can both be shown.
Waits for the text output, then adds the caption and the snapshot below it in the Console Output area.
Creates a 300×200 canvas and gets the 2D drawing context.
A diagonal gradient with three colour stops: green at 0, blue at 0.5 (the middle), and pink at 1. The varying colours give the pixelation something interesting to average.
A yellow circle centred at (150, 100) with radius 60. Its sharp edge shows clearly how pixelation turns smooth curves into staircase blocks.
blockSize is the side length of each square (15 means 15×15 pixels). blocks counts how many squares we process.
The outer loop moves down the canvas one block row at a time (y += blockSize); the inner loop moves across one block at a time (x += blockSize). Together they visit the top-left corner of every block.
300 divides evenly by 15, but 200 does not (13 full rows plus 5 leftover pixels). Math.min makes the last row of blocks shorter instead of reading outside the canvas.
getImageData(x, y, w, h) reads only the pixels of this block, then .data gives its flat [R, G, B, A, …] array. Calling getImageData once per block (not once per pixel) keeps this fast enough.
r, g, and b accumulate the sums of each channel. The inner loop steps by 4 through the block’s pixels, adds their red, green, and blue values, and counts the pixels.
Dividing each sum by count gives the average colour of the block. Math.round makes whole numbers, and the template string builds an rgb(…) colour. fillRect then covers the entire block with that one colour.
Adds one to the total number of blocks processed.
After both loops finish, the function reports how many blocks it created.
Shows the smooth image, applies 15px pixelation, then shows the blocky result. Try a blockSize of 5 (subtle) or 40 (very chunky).
Prints the block size and the block count. Math.ceil(300 / 15) is 20 columns and Math.ceil(200 / 15) is 14 rows, so 20 × 14 = 280 blocks; the actual count should match.
Quick Reference
| Method / Property | Purpose |
|---|---|
getContext("2d") |
Gets the 2D drawing context |
fillRect(x, y, w, h) |
Draws a filled rectangle |
arc(x, y, r, start, end) |
Draws a circle or arc |
createLinearGradient(...) |
Creates a gradient fill |
getImageData(x, y, w, h) |
Reads raw pixel data as a flat array |
putImageData(data, x, y) |
Writes modified pixel data back |
Common Mistakes
- Forgetting the pixel array is flat and grouped in fours (step by 4)
- Forgetting that values must stay in the 0–255 range (
ImageData.dataclamps for you, but a normal array does not) - Calling
getImageData()inside a tight per-pixel loop - Accidentally modifying the alpha channel
- Forgetting
putImageData(), so the canvas never changes - Running heavy filters on every animation frame without optimization
Best Practices
- Read pixel data once, process the array, then write it back once
- Keep filter functions small and single-purpose
- Clamp channel values after arithmetic
- Use
OffscreenCanvas+ Web Workers for heavy processing - Draw a real photo with
drawImage()before applying the same filters
Quick Summary
- Canvas drawing methods ultimately produce a grid of pixel colours
getImageData()/putImageData()let you read and write that grid- Grayscale averages RGB; invert uses 255 − value; brightness adds a clamped amount
- Pixelation averages colours inside square blocks
- The same techniques work on real photos after drawing them onto the canvas
Try It Yourself
What this code does: Draws an orange gradient with a blue circle, then chains two filters: first grayscale (removes colour), then +40 brightness (lightens the gray). Because each filter reads the canvas and writes it back, the second filter works on the result of the first. The output shows three pictures (original, after grayscale, after brightness) so you can see each step of the pipeline. Experiment: swap the order of the two filters, or change 40 to 100, and run it again.
// Helper: shows a copy of a canvas below the text output
function showCanvas(label, source) {
const copy = document.createElement("canvas");
copy.width = source.width;
copy.height = source.height;
copy.getContext("2d").drawImage(source, 0, 0);
copy.style.maxWidth = "100%";
setTimeout(() => {
const box = document.createElement("div");
box.className = "demo-canvas-box";
box.innerHTML = "<p class='demo-canvas-label'>" + label + "</p>";
box.appendChild(copy);
document.getElementById("previewContent").appendChild(box);
}, 0);
}
const canvas = document.createElement("canvas");
canvas.width = 300;
canvas.height = 200;
const ctx = canvas.getContext("2d");
const gradient = ctx.createLinearGradient(0, 0, 300, 0);
gradient.addColorStop(0, "#ff7e5f");
gradient.addColorStop(1, "#feb47b");
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, 300, 200);
ctx.beginPath();
ctx.arc(150, 100, 50, 0, Math.PI * 2);
ctx.fillStyle = "#118ab2";
ctx.fill();
function toGrayscale(ctx, width, height) {
const imageData = ctx.getImageData(0, 0, width, height);
const pixels = imageData.data;
for (let i = 0; i < pixels.length; i += 4) {
const avg = (pixels[i] + pixels[i + 1] + pixels[i + 2]) / 3;
pixels[i] = avg;
pixels[i + 1] = avg;
pixels[i + 2] = avg;
}
ctx.putImageData(imageData, 0, 0);
}
function adjustBrightness(ctx, width, height, amount) {
const imageData = ctx.getImageData(0, 0, width, height);
const pixels = imageData.data;
for (let i = 0; i < pixels.length; i += 4) {
pixels[i] = Math.min(255, Math.max(0, pixels[i] + amount));
pixels[i + 1] = Math.min(255, Math.max(0, pixels[i + 1] + amount));
pixels[i + 2] = Math.min(255, Math.max(0, pixels[i + 2] + amount));
}
ctx.putImageData(imageData, 0, 0);
}
showCanvas("Step 0: original", canvas);
console.log("Applying grayscale...");
toGrayscale(ctx, canvas.width, canvas.height);
showCanvas("Step 1: grayscale", canvas);
console.log("Then applying +40 brightness...");
adjustBrightness(ctx, canvas.width, canvas.height, 40);
showCanvas("Step 2: grayscale + brightness", canvas);
console.log("Filter pipeline complete: grayscale → brightness");Not part of the lesson. Takes a snapshot of the canvas when called, so each step of the pipeline can be shown.
Waits for the text output, then adds the caption and the snapshot below it in the Console Output area.
Creates a 300×200 canvas and gets the 2D drawing context.
A left-to-right gradient (y stays 0) from a deep orange to a light peach, painted over the whole canvas.
A blue circle in the centre. Blue and orange are very different colours, so after grayscale you can see how they turn into different shades of gray.
The same filter as the earlier example: read the pixels, average R, G, and B for every pixel (loop step of 4), write the average back into all three channels, then putImageData to update the canvas.
The same filter as the brightness example: add amount to R, G, and B, clamp each result with Math.min / Math.max, then write the pixels back. The shape of both filters is (ctx, width, height), which is what makes them easy to chain.
Captures a snapshot of the unfiltered scene.
Logs a message, applies grayscale, and shows the gray picture.
The second filter starts from the already-gray canvas and lightens it by 40. This is the core idea of a pipeline: the output of one filter is the input of the next.
Confirms the pipeline finished. The three pictures above show every stage.
Tip: Build filters as small reusable functions that take (ctx, width, height). This shape makes it easy to chain several filters into a pipeline.
🧪 Test Your JavaScript Code
Edit the code on the left and click “Run Code” to see the console output on the right.
📝 JavaScript Code
👁 Console Output
Click “Run Code” to see the output here.
Ctrl + Enter
to run code
Esc
to close
Code Explanation
The complete example stays visible. Use Previous and Next to move through its logical blocks.
Complete code · highlighted block
Explanation
Select Next to begin exploring the code.
Block 0 of 0