Я пытаюсь сделать некоторые динамические визуальные эффекты, используя пиксельные манипуляции холста HTML 5, но я сталкиваюсь с проблемой, когда установка пикселей в CanvasPixelArray смехотворно медленна.

Например, если у меня есть такой код:

imageData = ctx.getImageData(0, 0, 500, 500);

for (var i = 0; i < imageData.length; i += 4){
    imageData.data[i] = buffer[i];
    imageData.data[i + 1] = buffer[i + 1];
    imageData.data[i + 2] = buffer[i + 2];
}

ctx.putImageData(imageData, 0, 0);

Профилирование с помощью Chrome показывает, что он работает на 44% медленнее, чем следующий код, где CanvasPixelArray не используется.

tempArray = new Array(500 * 500 * 4);
imageData = ctx.getImageData(0, 0, 500, 500);

for (var i = 0; i < imageData.length; i += 4){
    tempArray[i] = buffer[i];
    tempArray[i + 1] = buffer[i + 1];
    tempArray[i + 2] = buffer[i + 2];
}

ctx.putImageData(imageData, 0, 0);

Я предполагаю, что причина этого замедления заключается в преобразовании между двойными числами Javascript и внутренними 8-битными целыми без знака, используемыми CanvasPixelArray.

Это предположение правильно?Есть ли в любом случае сократить время, затрачиваемое на установку значений в CanvasPixelArray?