Image_Processing #1 .js

<canvas id="canvas">canvas unsupported</canvas>
<script type="text/JavaScript">
     
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

canvas.width = 256;
canvas.height = 256;

var dst = ctx.createImageData(canvas.width, canvas.height);

for (var i = 0; i < canvas.height; i++) {
     for (var j = 0; j < canvas.width; j++) {
          
          var pix = (i*canvas.width + j) * 4;     // i-j Coordinate

          dst.data[pix] = i;       // Red
          dst.data[pix+1] = 0;     // Green
          dst.data[pix+2] = 0;     // Blue
          dst.data[pix+3] = 255;   // Alpha
     }
}

ctx.putImageData(dst, 0, 0);

</script>