Preparation Code Preparation HTML (this will be inserted in the <body>
of a valid HTML5 document in standards mode) (useful when testing DOM operations or including libraries) <canvas id ="canvas" height ="256" width ="256" > </canvas >
Setup JS 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 ;
var buf = new ArrayBuffer (imageData.data .length );
var buf8 = new Uint 8ClampedArray(buf);
var pixels = new Int 32Array ( imageData.data .buffer );
Teardown JS
ctx.putImageData (imageData, 0 , 0 );
Test cases
Test #1 Title *
Async
Code * var value = 23 & 0xff ;
for (var y = 0 ; y < canvasHeight; ++y) {
for (var x = 0 ; x < canvasWidth; ++x) {
var index = (y * canvasWidth + x) * 4 ;
data[index] = value;
data[++index] = value;
data[++index] = value;
data[++index] = 255 ;
}
}
Test #2 Title *
Async
Code * var value = 23 & 0xff ;
var data32 = new Uint 32Array (buf);
for (var y = 0 ; y < canvasHeight; ++y) {
for (var x = 0 ; x < canvasWidth; ++x) {
data32[y * canvasWidth + x] =
(255 << 24 ) |
(value << 16 ) |
(value << 8 ) |
value;
}
}
imageData.data .set (buf8);
Title *
Async
Code * var value = 173 & 0xff ;
for (var y = 0 ; y < canvasHeight; ++y) {
for (var x = 0 ; x < canvasWidth; ++x) {
pixels[y * canvasWidth + x] =
(255 << 24 ) |
(value << 16 ) |
(value << 8 ) |
value;
}
}
Title *
Async
Code * var value = 173 & 0xff ;
for (var i = 0 ; i < canvasHeight*canvasWidth; i++) {
pixels[i] =
(255 << 24 ) |
(value << 16 ) |
(value << 8 ) |
value;
}
Title *
Async
Code * var value = 173 & 0xff ;
lng = canvasHeight*canvasWidth
for (var i = 0 ; i < lng ; i++) {
pixels[i] =
(255 << 24 ) |
(value << 16 ) |
(value << 8 ) |
value;
}
Title *
Async
Code * var value = 173 & 0xff ;
lng = canvasHeight*canvasWidth
for (var i = lng-1 ; i != 0 ; i--) {
pixels[i] =
(255 << 24 ) |
(value << 16 ) |
(value << 8 ) |
value;
}
Title *
Async
Code * var value = 173 & 0xff ;
lng = canvasHeight*canvasWidth
var i = lng-1
while (i--) {
pixels[i] =
(255 << 24 ) |
(value << 16 ) |
(value << 8 ) |
value;
}