Ninjafy

ninjafy.js

(function(d){
    var drawNinja = function(){
        //var wrapper = d.getElementById('wrapper');
        var wrapper = d.getElementsByTagName('body');
        
        //the ninja head
        var ninjaCanvas = d.createElement('canvas');
        ninjaCanvas.style.position = "absolute";
        ninjaCanvas.style.zIndex = 9999999999;
        ninjaCanvas.id = "ninjafied";
        var ctx = ninjaCanvas.getContext("2d");
        ctx.beginPath();
        ctx.arc(100,75,50,0,2*Math.PI);
        ctx.fillStyle = "rgb(0,0,0)";
        ctx.closePath();
        ctx.fill();
        ctx.stroke();
        
        //ninja mask eye cut outs
        ctx.beginPath();
        ctx.scale(1, 0.35);
        ctx.arc(100,170,40,0,2*Math.PI);
        ctx.fillStyle = "rgb(255,255,255)";
        
        ctx.closePath();
        ctx.fill();
        ctx.stroke();
        
        //eyeballs
        ctx.scale(1, 2.5);
        ctx.beginPath();
        ctx.arc(80,67,8,0,2*Math.PI);
        ctx.fillStyle = "rgb(0,0,0)";
        ctx.closePath();
        ctx.fill();
        ctx.stroke();
        
        //ctx.scale(1, 2.5);
        ctx.beginPath();
        ctx.arc(120,67,8,0,2*Math.PI);
        ctx.fillStyle = "rgb(0,0,0)";
        ctx.closePath();
        ctx.fill();
        ctx.stroke();
        
        ctx.fillStyle = "rgb(255,0,0)";
        ctx.font = "24px Arial Black";
        ctx.fillText("Ninjafied!", 43, 20);
        
        
        var kid = wrapper[0].childNodes.item(0);
        
        if(kid){
            wrapper[0].insertBefore(ninjaCanvas, kid);
        }
        else{
            wrapper[0].appendChild(ninjaCanvas);
        }
    };
    d.addEventListener("keyup",function(e){
        if (e.keyCode === 78) {
            var ninja = d.getElementById("ninjafied");
            if(ninja){
               d.body.removeChild(ninja); 
            }
            else{
                drawNinja();
            }
        }
    });
})(document);