在Javascript播放器上渲染过多点

作为一个项目的一部分，我必须从一个文本文件中在JS播放器上渲染一个视频，该文件包含点-所有更改的坐标以及每个帧中的颜色。下面是我用来在屏幕上画这些点的代码

但问题是，每帧中更改的像素数高达20000个，我需要在30毫秒内显示这些像素（帧间时间差）。因此，当我运行这段代码时，浏览器几乎每一帧都挂起。有人能建议对此进行改进吗

非常感谢您的帮助

c.drawImage(img,0,0,800,800);
    setInterval(
        function(){
            while(tArr[index]==time) {
                var my_imageData = c.getImageData(0,0,width, height);
                color(my_imageData,Math.round(yArr[index]),Math.round(xArr[index]),Math.round(iArr[index]),255);
                c.putImageData(my_imageData,0,0);
                index=index+1;
            }
            time = tArr[index];
        }
    ,30);

xArr、yArr、iArr、tArr分别是要渲染的对应点的x坐标、y坐标、强度值和出现时间的数组

function color(imageData,x,y,i,a){  //wrapper function to color the point
    var index = (x + y * imageData.width) * 4;
    imageData.data[index+0] = i;
    imageData.data[index+1] = i;
    imageData.data[index+2] = i;
    imageData.data[index+3] = a;
}