Метод createImageData

Создает объект imageData.

Синтаксис 1

createImageData(width, height)

Параметры

width, height — размеры создаваемого объекта

Результатом будет объект imageData с RGBA = (0,0,0,0) и размером width x height.

Синтаксис 2

createImageData(OldImageData)

Параметры

OldImageData — объект imageData полученный ранее с помощью getImageData или созданный с помощью createImageData

Результатом будет объект imageData идентичный OldImageData.

Чтобы установить нужные цвета в массиве используем свойство data:

imageData.data[i] = value,

• i — позиция в массиве imageData;
• value — значение для данного канала RGBA (число от 0 до 255).

Пример

var pixelSet = ctx.createImageData(50,50); // Черный квадрат 50 x 50 полностью прозрачный
var pixelSetLen = 4*50*50,
	i;
for(i=3;i<pixelSetLen;i+=4)
{
	pixelSet.data[i] = 255; // далаем его не прорачным
	if((i-3)%20 == 0) pixelSet.data[i-3] = 255; // каждый 5-й пиксель делаем красным
}
ctx.putImageData(pixelSet, 20,20); // выводим изображение