最速じゃない方

from: http://hacks.mozilla.org/2011/12/faster-canvas-pixel-manipulation-with-typed-arrays/

by ethertank

HTML

<canvas id="canvas" height="256" width="256"></canvas>


<ul>

<li><a href="http://hacks.mozilla.org/2011/12/faster-canvas-pixel-manipulation-with-typed-arrays/" title="Faster Canvas Pixel Manipulation with Typed Arrays ✩ Mozilla Hacks – the Web developer blog">Faster Canvas Pixel Manipulation with Typed Arrays ✩ Mozilla Hacks – the Web developer blog</a></li>

<li><a href="http://www.html5.jp/canvas/ref/method/getImageData.html" title="createImageData, getImageData, putImageData メソッド - Canvasリファレンス - HTML5.JP">createImageData, getImageData, putImageData メソッド - Canvasリファレンス - HTML5.JP</a></li>
    
</ul>

JavaScript

var canvas = document.getElementById('canvas');
var canvasWidth  = canvas.width;
var canvasHeight = canvas.height;
var ctx = canvas.getContext('2d');
var imageData = ctx.getImageData(0, 0, canvasWidth, canvasHeight);

var data = imageData.data;

for (var y = 0; y < canvasHeight; ++y) {
    for (var x = 0; x < canvasWidth; ++x) {
        var index = (y * canvasWidth + x) * 4;

        var value = x * y & 0xff;

        data[index]   = value;    // red
        data[++index] = value;    // green
        data[++index] = value;    // blue
        data[++index] = 255;      // alpha
    }
}

ctx.putImageData(imageData, 0, 0);

var D = ctx.getImageData(0,0,1,1);



console.log(D);

/*
ImageData
  data: CanvasPixelArray
    0: 0
    1: 0
    2: 0
    3: 255
    length: 4
*/