Nuestros voluntarios aún no han traducido este artículo al Español. Únete a nosotros y ayúdanos a traducirlo
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.
Syntax
ImageData ctx.createImageData(width, height); ImageData ctx.createImageData(imagedata);
Parameters
width
- The width to give the new
ImageData
object. height
- The height to give the new
ImageData
object. imagedata
- An existing
ImageData
object from which to copy the width and height. The image itself is not copied.
Return value
A new ImageData
object with the specified width and height. The new object is filled with transparent black pixels.
Errors thrown
IndexSizeError
- Thrown if either of the width or height arguments are zero.
Examples
Using the createImageData
method
This is just a simple code snippet which uses the createImageData
method. For more information, see Pixel manipulation with canvas and the ImageData
object.
HTML
<canvas id="canvas"></canvas>
JavaScript
var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); ctx.rect(10, 10, 100, 100); ctx.fill(); console.log(ctx.createImageData(100, 100)); // ImageData { width: 100, height: 100, data: Uint8ClampedArray[40000] }
Specifications
Specification | Status | Comment |
---|---|---|
WHATWG HTML Living Standard The definition of 'CanvasRenderingContext2D.createImageData' in that specification. |
Living Standard |
Browser compatibility
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Basic support | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) |
Feature | Android | Chrome for Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|
Basic support | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) |
Compatibility notes
- Starting with (Firefox 5.0 / Thunderbird 5.0 / SeaMonkey 2.2):
createImageData()
now correctly return at least one pixel's worth of image data if a rectangle smaller than one pixel is specified.- Specifying non-finite values when calling
createImageData()
now properly throws aNOT_SUPPORTED_ERR
exception. createImageData()
now handle negative arguments in accordance with the specification, by flipping the rectangle around the appropriate axis.
See also
- The interface defining it,
CanvasRenderingContext2D
. ImageData
- Pixel manipulation with canvas