我是新尝试HTML5 / JS中的高速图像显示。我是HTML5 / JS的新手，正在尝试评估可用于将图像渲染到屏幕上的选项。
输入是一个像素数组。
我使用了CanvasRenderingContext2D，并使用了canvas和putImageData将像素渲染到屏幕上，但最终我的FPS速度变慢，图像尺寸也随之增加。我要解决的用例是将原始像素数组渲染到屏幕上，而不是绘制形状/绘图。我的目标是以尽可能高的FPS进行渲染。
var imageCanvas = document.getElementById('imageCanvas');
var imageContext = imageCanvas.getContext('2d', { alpha: false });
var pixelData = imageContext.createImageData(imageWidth, imageWidth);
// ---------------------------------------------------------
// here: Fill up pixelData with image pixels to be rendered
// ---------------------------------------------------------
imageContext.putImageData(pixelData , 0, 0);
对于这样的用例，我该怎么办？我在许多地方读过putImageData是这里的瓶颈，更好的方法是使用DrawImage。是否可以避免使用putImageData并使用DrawImage从pixelData读取并渲染？
我如何有效地使用GPU？
WebGLRenderingContext是否适合这种情况？