HTML5画布-在屏幕上显示像素颜色阵列的最快方式

给定40x30的颜色阵列，在400x300的画布中在屏幕上显示它们的最快方法是什么？也就是说，每种颜色都需要画布元素中的100个像素。

使用HTML5中的canvas元素，我创建了4种可能的方法。http://jsperf.com/pixel-plotting

随机像素数据被加载到40x30阵列中。然后将其显示在大小为400x300的画布中，使得每个逻辑像素由屏幕上的100个像素表示。

最快的方法（使用Chrome 38.0）是在隐藏的画布中创建图像数据，并使用toDataURL将其复制到屏幕上显示的画布中。属性imageSmoothingEnabled设置为false，以在像素向上缩放时停止像素模糊。

还有其他方法吗？我尝试使用较小的画布尺寸，并在CSS中放大，但这导致像素模糊。

我想知道这个测试在其他网络浏览器中是如何进行的；尤其是移动电话。

将像素数据绘制到屏幕上非常重要，因为它需要每秒至少30次，所以即使是一个小的调整也可以大大提高效率。

以下是我测试的四种方法的代码。

方法1

var png = document.createElement("img");
var c2 = document.getElementById("myCanvas");
var ctx2 = c2.getContext("2d");
var c1 = document.createElement("canvas");
c1.width = 40;
c1.height = 30;
var ctx1 = c1.getContext("2d");
var imgData = ctx1.createImageData(40, 30);
for (var i=0; i<imgData.data.length; i+=4) {
var x = (i/4)%40;
    var y = Math.floor(i/160);
    imgData.data[i] = pixelData1[x][y].r;
    imgData.data[i+1] = pixelData1[x][y].g;
    imgData.data[i+2] = pixelData1[x][y].b;
    imgData.data[i+3] = 255;
}
ctx1.putImageData(imgData, 0, 0);
png.src = c1.toDataURL("image/png");
c2.width = 400;
c2.height = 300;
ctx2.imageSmoothingEnabled = false;
ctx2.drawImage(png, 0, 0, 400, 300);

方法2

var c = document.getElementById("myCanvas");
c.width = 400;
c.height = 300;
var ctx = c.getContext("2d");
var imgData = ctx.createImageData(400, 300);
for (var i=0; i<imgData.data.length; i+=4) {
    var x = Math.floor(((i/4)%400)/10);
    var y = Math.floor(i/16000);
    imgData.data[i] = pixelData1[x][y].r;
    imgData.data[i+1] = pixelData1[x][y].g;
    imgData.data[i+2] = pixelData1[x][y].b;
    imgData.data[i+3] = 255;
}
ctx.putImageData(imgData, 0, 0);

方法3

var png = document.createElement("img");
var c2 = document.getElementById("myCanvas");
var ctx2 = c2.getContext("2d");
var c1 = document.createElement("canvas");
c1.width = 40;
c1.height = 30;
var ctx1 = c1.getContext("2d");
for (var x = 0; x < 40; x++) {
    for (var y = 0; y < 30; y++) {
        ctx1.fillStyle = pixelData2[x][y];
        ctx1.fillRect(x, y, 1, 1);
    }
}
png.src = c1.toDataURL("image/png");
c2.width = 400;
c2.height = 300;
ctx2.imageSmoothingEnabled = false;
ctx2.drawImage(png, 0, 0, 400, 300);

方法4

var c = document.getElementById("myCanvas");
c.width = 400;
c.height = 300;
var ctx = c.getContext("2d");
for (var x=0; x<40; x++) {
    for (var y=0; y<30; y++) {
        ctx.fillStyle = pixelData2[x][y];
        ctx.fillRect(x*10, y*10, 10, 10);
    }
}