Vanilla JS/Canvas Image manipulation

by Joel Kirchartz

HTML

<canvas id="can"></canvas>
<div id="tools">
    <button id="random">noise: grey</button>
    <button id="random2">noise: color</button>
    <button id="pop">pop</button>
    <button id="bitshift">bitshift</button>
    <button id="rbitshift">random bitshift</button>
    <button id="colorshift">color shift</button>
    <button id="randomshift">random color shift</button>
    <button id="invert">invert</button>
</div>
<div id="status"></div>

CSS

#can, #tools, #status {border:1px solid #f0f;min-height:100px;min-width:100px}

JavaScript

/*

http://nooshu.com/using-image-data-inside-the-html5-canvas-element

*/
var canvas = document.getElementById("can"),
        context = canvas.getContext("2d"),
        state = document.getElementById('status'),
        text = document.getElementById('txt');

    if (typeof window.FileReader === 'undefined') {
        state.addClass('fail');
        state.innerHTML = 'YU NO HAVE File API & FileReader??' +
            'YU NO GET MODERN BROWSER?!!?';
    } else {
        state.innerHTML += ' File API success...<br />';
    }
    context.height = canvas.height = 100;
    context.width = canvas.width = 300;
    context.font = "bold 16px sans-serif";
    context.fillStyle = "#0000ff"; // text color
    context.fillText("Drag Image Here", 85, 60);  
canvas.ondragover = function(e) {
    e.preventDefault();
    return false;
};
canvas.ondrop = function(e) {
        e.preventDefault();
        var file = e.dataTransfer.files[0],
            reader = new FileReader();
        reader.onload = function(event) {
            var img = new Image(),
                imgStr = event.target.result,
                imgData = context.getImageData(0,0, context.width,context.height);
            state.innerHTML += ' Image Uploaded: <a href="' +
                imgStr + '" target="_blank">view image</a><br />';
            img.src = event.target.result;
            img.onload = function(event) {
                context.height = canvas.height = this.height;
                context.width = canvas.width = this.width;
                context.drawImage(this, 0, 0);
                state.innerHTML += ' Canvas Loaded: <a href="' + canvas.toDataURL() + '" target="_blank">view canvas</a><br />';
            };
        };
        reader.readAsDataURL(file);
        return false;
    };
    canvas.ondragenter = function(e) {
        e.preventDefault();
        context.clearRect ( 0 , 0 , context.width , context.height );
        context.fillText("YES HERE!!", 85, 60);
        return false;
   ...