Test DataView

by bakhshi

HTML

<canvas></canvas>

CSS

canvas{
    width:500px;
    height:500px;
}

JavaScript

$ = document.querySelectorAll.bind(document);

var canvas = $('canvas')[0];
var context = canvas.getContext('2d');
context.setFillColor('blue');
context.fillRect(0, 0, canvas.width, canvas.height);
var original = context.getImageData(0, 0, canvas.width, canvas.height);
var pixels = context.createImageData(original);
for(var x =0; x < pixels.width; x++){
    for(var y=0; y<pixels.height;y++){
        var offset = x * pixels.width + y;
        pixels.data[offset] = 0; //no red
        pixels.data[offset+1] = 0; //no red
        pixels.data[offset+2] = 0; //no red
        pixels.data[offset+3] = 255; //no red
    }
}

context.putImageData(pixels, 0, 0);