JavaScript Canvas createImageData Tutorial
last modified April 3, 2025
In this article, we explore the Canvas createImageData method in JavaScript. This method is essential for direct pixel manipulation on HTML canvas. Mastering pixel operations is crucial for image processing and effects.
Basic Definition
createImageData creates a new blank ImageData object with specified dimensions. ImageData represents the underlying pixel data of a canvas area. It contains width, height, and a data array of RGBA values.
The data array stores pixel values in RGBA order (Red, Green, Blue, Alpha). Each component ranges from 0 to 255. Alpha controls transparency (0=transparent, 255=opaque).
Creating Blank ImageData
This example demonstrates how to create a blank ImageData object and display it.
<!DOCTYPE html>
<html>
<head>
<title>Basic createImageData</title>
</head>
<body>
<canvas id="myCanvas" width="200" height="200"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
// Create 100x100 ImageData object
const imageData = ctx.createImageData(100, 100);
// Put the ImageData at (50,50)
ctx.putImageData(imageData, 50, 50);
</script>
</body>
</html>
This example creates a 100x100 pixel ImageData object. By default, all pixels are transparent black (RGBA 0,0,0,0). We then draw it on canvas at (50,50).
The putImageData method renders the pixel data onto the canvas.
This demonstrates the basic workflow of creating and displaying ImageData.
Manipulating Pixel Data
This example shows how to modify pixel values in an ImageData object.
<!DOCTYPE html>
<html>
<head>
<title>Pixel Manipulation</title>
</head>
<body>
<canvas id="myCanvas" width="200" height="200"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
const imageData = ctx.createImageData(100, 100);
const data = imageData.data;
// Set all pixels to semi-transparent red
for (let i = 0; i < data.length; i += 4) {
data[i] = 255; // R
data[i + 1] = 0; // G
data[i + 2] = 0; // B
data[i + 3] = 128; // A (50% opacity)
}
ctx.putImageData(imageData, 50, 50);
</script>
</body>
</html>
Here we create a 100x100 ImageData and modify all pixels to be semi-transparent red. The data array is accessed and modified in RGBA quadruplets.
Each pixel occupies 4 consecutive array elements (R,G,B,A). The loop increments by 4 to process each pixel. The alpha value 128 makes the color 50% opaque.
Creating a Gradient Effect
This example creates a smooth color gradient by manipulating pixel data.
<!DOCTYPE html>
<html>
<head>
<title>Gradient Effect</title>
</head>
<body>
<canvas id="myCanvas" width="256" height="256"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
const imageData = ctx.createImageData(256, 256);
const data = imageData.data;
for (let y = 0; y < 256; y++) {
for (let x = 0; x < 256; x++) {
const index = (y * 256 + x) * 4;
data[index] = x; // R increases horizontally
data[index + 1] = y; // G increases vertically
data[index + 2] = 128; // Constant blue
data[index + 3] = 255; // Fully opaque
}
}
ctx.putImageData(imageData, 0, 0);
</script>
</body>
</html>
This creates a 256x256 gradient where red increases from left to right and green increases from top to bottom. Blue is constant at 128 (medium intensity).
The nested loops calculate each pixel's position. The index formula converts 2D coordinates to the 1D data array. This demonstrates complex pixel math.
Creating ImageData from Existing Data
This example shows how to create ImageData from an existing Uint8ClampedArray.
<!DOCTYPE html>
<html>
<head>
<title>ImageData from Array</title>
</head>
<body>
<canvas id="myCanvas" width="100" height="100"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
// Create array with 100x100 pixels (40000 elements)
const pixelArray = new Uint8ClampedArray(100 * 100 * 4);
// Make a diagonal red line
for (let y = 0; y < 100; y++) {
const x = y;
const index = (y * 100 + x) * 4;
pixelArray[index] = 255; // R
pixelArray[index + 3] = 255; // A
}
// Create ImageData from array
const imageData = new ImageData(pixelArray, 100);
ctx.putImageData(imageData, 0, 0);
</script>
</body>
</html>
Here we first create a Uint8ClampedArray and populate it with pixel data. We then create an ImageData object from this array, specifying the width.
The example draws a red diagonal line by setting red and alpha values for pixels where x equals y. Other pixels remain transparent (default 0 values).
Image Processing: Invert Colors
This example demonstrates simple image processing by inverting colors.
<!DOCTYPE html>
<html>
<head>
<title>Invert Colors</title>
</head>
<body>
<canvas id="myCanvas" width="400" height="300"></canvas>
<button id="invertBtn">Invert Colors</button>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
const btn = document.getElementById('invertBtn');
// Draw initial image
ctx.fillStyle = 'blue';
ctx.fillRect(50, 50, 300, 200);
ctx.fillStyle = 'yellow';
ctx.fillRect(100, 100, 200, 100);
btn.addEventListener('click', () => {
// Get ImageData of entire canvas
const imageData = ctx.getImageData(0, 0, 400, 300);
const data = imageData.data;
// Invert each color channel
for (let i = 0; i < data.length; i += 4) {
data[i] = 255 - data[i]; // R
data[i + 1] = 255 - data[i + 1]; // G
data[i + 2] = 255 - data[i + 2]; // B
// Alpha remains unchanged
}
ctx.putImageData(imageData, 0, 0);
});
</script>
</body>
</html>
This example first draws a simple composition, then provides a button to invert its colors. The inversion is done by subtracting each RGB value from 255.
The getImageData captures the current canvas content.
After processing, putImageData renders the modified pixels.
This shows practical image processing with ImageData.
Source
MDN createImageData Documentation
In this article, we have explored various techniques for creating and manipulating ImageData objects. These methods are essential for advanced canvas operations and image processing in web applications.
Author
List all JS Canvas tutorials.