The CanvasRenderingContext2D.createImageData()
method of the Canvas 2D API creates a new, blank ImageData
object with the specified dimensions. All of the pixels in the new object are transparent black.
The CanvasRenderingContext2D.createImageData()
method of the Canvas 2D API creates a new, blank ImageData
object with the specified dimensions. All of the pixels in the new object are transparent black.
js
createImageData(width, height) createImageData(width, height, settings) createImageData(imagedata)
width
The width to give the new ImageData
object. A negative value flips the rectangle around the vertical axis.
height
The height to give the new ImageData
object. A negative value flips the rectangle around the horizontal axis.
settings
Optional
An object with the following properties:
colorSpace
: Specifies the color space of the image data. Can be set to "srgb"
for the sRGB color space or "display-p3"
for the display-p3 color space.imagedata
An existing ImageData
object from which to copy the width and height. The image itself is not copied.
A new ImageData
object with the specified width and height. The new object is filled with transparent black pixels.
IndexSizeError
DOMException
Thrown if either of the width
or height
arguments is zero.
This snippet creates a blank ImageData
object using the createImageData()
method.
html
<canvas id="canvas"></canvas>
The generated object is 100 pixels wide and 50 pixels tall, making 5,000 pixels in all. Each pixel within an ImageData
object consists of four array values, so the object's data
property has a length of 4 × 5,000, or 20,000.
js
const canvas = document.getElementById("canvas"); const ctx = canvas.getContext("2d"); const imageData = ctx.createImageData(100, 50); console.log(imageData); // ImageData { width: 100, height: 50, data: Uint8ClampedArray[20000] }
This example creates and fills a new ImageData
object with purple pixels.
html
<canvas id="canvas"></canvas>
Since each pixel consists of four values, the for
loop iterates by multiples of four. The array values associated with each pixel are R (red), G (green), B (blue), and A (alpha), in that order.
js
const canvas = document.getElementById("canvas"); const ctx = canvas.getContext("2d"); const imageData = ctx.createImageData(100, 100); // Iterate through every pixel for (let i = 0; i < imageData.data.length; i += 4) { // Modify pixel data imageData.data[i + 0] = 190; // R value imageData.data[i + 1] = 0; // G value imageData.data[i + 2] = 210; // B value imageData.data[i + 3] = 255; // A value } // Draw image data to the canvas ctx.putImageData(imageData, 20, 20);
For more examples using createImageData()
and the ImageData
object, see Pixel manipulation with canvas and ImageData.data
.
Specification |
---|
HTML Standard # dom-context-2d-createimagedata-dev |
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet | |
createImageData |
2 | 12 | 3.5 | 9 | ≤12.1 | 4 | ≤37 | 18 | 4 | ≤12.1 | 3.2 | 1.0 |
CanvasRenderingContext2D
ImageData
© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/createImageData