Shaky Shake JS Playground

by Paulo Ávila

HTML

<canvas id="ctx" width="100" height="100" style="background-color: #ccc;">

JavaScript

ctx = (document.getElementById('ctx')).getContext('2d');

//ctx.drawRect(0,0,)

//ctx.beginPath();
//ctx.rect(0, 0, 50, 50);
//ctx.fillStyle = 'red';
//ctx.fill();

ctx.fillStyle = "red";
ctx.fillRect (0, 0, 100, 100);

i = 0;
shifted = ctx.getImageData(5,0,100,100);
//console.log(shifted);
while(i++ < shifted.data.length) {
    if (i % 4 === 0) {
        console.log(shifted.data[i]);
    }
    if (i % 2 === 0) {
       // shifted.data[i] = 255;
    }
//    console.log('hi')
}

//console.log(shifted.data[98 * 4]);

ctx.fillStyle = "blue";
ctx.fillRect (0, 0, 100, 100);

ctx.putImageData(shifted,0,0);

//ctx.translate(-20,4);


//ctx.fillRect (0, 0, 50, 50);