YouTip LogoYouTip

Home > HTML > Canvas Imagedata Data

Canvas Imagedata Data

📅 2026-06-14 | 📂 HTML
# HTML Canvas ImageData.data Property The `ImageData.data` property returns a one-dimensional array containing the image data in the RGBA order, with integer values between `0` and `255` (inclusive). This property is part of the `ImageData` object, which represents the underlying pixel data of an area of a `` element. By manipulating this array directly, you can perform pixel-level image processing, such as creating filters, generating textures, or modifying specific parts of an image. --- ## Syntax ```javascript imageData.data; ``` ### Return Value * **Type:** `Uint8ClampedArray` * **Description:** A one-dimensional, flat array containing the color and alpha values of all pixels in the `ImageData` object. --- ## How the Pixel Data is Structured The `data` array stores pixel information sequentially from the top-left corner of the image to the bottom-right corner. For every single pixel, there are **four** consecutive values in the array representing its color and transparency (RGBA): 1. **R** - Red channel (0 to 255) 2. **G** - Green channel (0 to 255) 3. **B** - Blue channel (0 to 255) 4. **A** - Alpha channel (0 to 255; `0` is fully transparent, and `255` is fully opaque) Because each pixel requires 4 array elements, the total length of the `data` array is calculated as: $$\text{Length} = \text{Width} \times \text{Height} \times 4$$ ### Accessing Specific Pixels * **First Pixel (Top-Left):** ```javascript var imgData = ctx.createImageData(100, 100); imgData.data = 255; // Red imgData.data = 0; // Green imgData.data = 0; // Blue imgData.data = 255; // Alpha (Opaque) ``` * **Second Pixel:** ```javascript imgData.data = 0; // Red imgData.data = 255; // Green imgData.data = 0; // Blue imgData.data = 255; // Alpha (Opaque) ``` * **Pixel at Coordinates $(x, y)$:** To find the starting index of a pixel at a specific column `x` and row `y` in an image of a given `width`: ```javascript var index = (y * width + x) * 4; var r = imgData.data; var g = imgData.data[index + 1]; var b = imgData.data[index + 2]; var a = imgData.data[index + 3]; ``` --- ## Code Examples ### Example 1: Creating a Solid Red Square The following example creates a $100 \times 100$ pixel `ImageData` object and loops through the array to set every pixel to solid red. Finally, it draws the image onto the canvas using `putImageData()`. ```html Your browser does not support the HTML5 canvas tag. ``` ### Example 2: Creating a Grayscale Filter You can read existing pixel data using `getImageData()`, manipulate the `data` array, and write it back to create visual effects like a grayscale filter: ```javascript var imgData = ctx.getImageData(0, 0, canvas.width, canvas.height); var data = imgData.data; for (var i = 0; i < data.length; i += 4) { var r = data; var g = data[i + 1]; var b = data[i + 2]; // Calculate the grayscale value using the luminosity formula var grayscale = 0.299 * r + 0.587 * g + 0.114 * b; // Set Red, Green, and Blue to the grayscale value data = grayscale; // R data[i + 1] = grayscale; // G data[i + 2] = grayscale; // B // data[i + 3] (Alpha) remains unchanged } // Write the grayscale image back to the canvas ctx.putImageData(imgData, 0, 0); ``` --- ## Browser Compatibility | Feature | Chrome | Edge/IE | Firefox | Safari | Opera | | :--- | :--- | :--- | :--- | :--- | :--- | | **`ImageData.data`** | Yes (All) | 9.0+ | Yes (All) | Yes (All) | Yes (All) | *Note: Internet Explorer 8 and earlier versions do not support the `` element.* --- ## Related Methods To work effectively with `ImageData.data`, you should also refer to the following Canvas 2D API methods: * [createImageData()](canvas-createimagedata.html) - Creates a new, blank `ImageData` object with the specified dimensions. * [getImageData()](canvas-getimagedata.html) - Returns an `ImageData` object copy of the pixel data for a specified area of the canvas. * [putImageData()](canvas-putimagedata.html) - Paints data from a given `ImageData` object onto the canvas.
← Canvas CreateimagedataCanvas Imagedata Height →

📂 Categories