Установка пикселя на canavs imageData для заданных X и Y

Question

В настоящее время я устанавливаю отдельные пиксели на холсте в цикле, используя метод fillRect, например:

context.fillStyle = "rgba("+colourR+","+colourG+","+colourB+",255)";
context.fillRect( x, y, 1, 1 )

Этот метод работает нормально, однако он и putImageData очень медленные.Поэтому я решил попытаться установить пиксели индивидуально в цикле, а затем использовать один вызов putImageData, когда он будет готов к выводу на экран, например:

var screenImageData = context.getImageData(0,0,800,600);
var pixelBuffer = screenImageData.data;    
pixelBuffer[(x*4) + (y*(screenImageData.width * 4))] = colourR;
pixelBuffer[(x*4) + (y*(screenImageData.width * 4)) + 1] = colourG;
pixelBuffer[(x*4) + (y*(screenImageData.width * 4)) + 2] = colourB;
pixelBuffer[(x*4) + (y*(screenImageData.width * 4)) + 3] = 255;

...

context.putImageData(screenImageData,0,0);

Однако это создает совершенно другойвывод в метод fillRect (он выглядит как перемешанный мусор).Что я тут не так делаю?

Answer 1

Проблема здесь заключалась в способе вычисления x и y, по-видимому, putImageData автоматически преобразовывает их в целые. Использование Math.floor для них - это все, что требовалось.