var heroCanvas = {
    init : function(){
        this.drawHero();
    },
    drawHero : function(){
        var hero = new Image(),
            canvas = document.getElementById('heroCanvas'),
            ctx = canvas.getContext('2d'),
            requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
            window.requestAnimationFrame = requestAnimationFrame;
        window.addEventListener("keydown", onKeyDown, false);
        window.addEventListener("keyup", onKeyUp, false);
        function onKeyDown(event) {
            var keyCode = event.keyCode;
            console.log(keyCode);
            switch (keyCode) {
                case 37: //Left
                    keyLeft = true;
                    break;
                case 38: //Top
                    keyTop = true;
                    break;
                case 39: //Right
                    keyRight = true;
                    break;
                case 40: //Bottom
                    keyBottom = true;
                    break;
            }
        }

        function onKeyUp(event) {
            var keyCode = event.keyCode;
            switch (keyCode) {
                case 37: //Left
                    keyLeft = false;
                    break;
                case 38: //Top
                    keyTop = false;
                    break;
                case 39: //Right
                    keyRight = false;
                    break;
                case 40: //Bottom
                    keyBottom = false;
                    break;
            }
        }

        //neccessary variables
        var tickX = 10,
            tickY = 10,
            keyLeft = false,
            keyTop = false,
            keyRight = false,
            keyBottom = false;
        //main animation function
        function drawStuff() {
            window.requestAnimationFrame(drawStuff);
            hero.src = "/images/character.png";
            hero.onload = function(){
                console.log("image loaded");
                   ctx.drawImage(hero, 0, 0, 16, 16, tickX, tickY, 16, 16);
            };
            if (keyRight == true) {
                tickX += 1;
                ctx.clearRect ( 0 , 0 , canvas.width, canvas.height );
                ctx.drawImage(hero, 0, 32, 16, 16, tickX, tickY, 16, 16);
            }
            if (keyBottom == true) {
                tickY += 1;
                ctx.clearRect ( 0 , 0 , canvas.width, canvas.height );
                ctx.drawImage(hero, 0, 0, 16, 16, tickX, tickY, 16, 16);
            }
            if (keyTop == true) {
                tickY--;
                ctx.clearRect ( 0 , 0 , canvas.width, canvas.height );
                ctx.drawImage(hero, 0, 16, 16, 16, tickX, tickY, 16, 16);
            }
            if (keyLeft == true) {
                tickX--;
                ctx.clearRect ( 0 , 0 , canvas.width, canvas.height );
                ctx.drawImage(hero, 0, 48, 16, 16, tickX, tickY, 16, 16);
            }
        }
        window.requestAnimationFrame(drawStuff);
    }
}


@@ -1649,33 +1649,32 @@
     %7D%0A        %7D%0A
-%0A
         //necces
@@ -1844,33 +1844,560 @@
 eyBottom = false
-;
+,%0A            switchImage = true;%0A        function drawMyImage(image, x, y, tickX, tickY)%7B%0A            if(switchImage)%7B%0A                ctx.clearRect ( 0 , 0 , canvas.width, canvas.height );%0A                ctx.drawImage(image, x, y, 16, 16, tickX, tickY, 16, 16);%0A                switchImage = false;%0A            %7Delse%7B%0A                ctx.clearRect ( 0 , 0 , canvas.width, canvas.height );%0A                ctx.drawImage(image, x+16, y, 16, 16, tickX, tickY, 16, 16);%0A                switchImage = true;%0A            %7D%0A        %7D
 %0A        //main 
@@ -2642,35 +2642,30 @@
             
-   ctx.
 draw
+My
 Image(hero, 
@@ -2659,39 +2659,28 @@
 yImage(hero,
- 
 0,
- 
 0,
- 16, 16, 
 tickX, tickY
@@ -2675,32 +2675,24 @@
 tickX, tickY
-, 16, 16
 );%0A         
@@ -2844,32 +2844,56 @@
             
-ctx.
+var animate = setInterval(
 draw
+My
 Image(hero, 
@@ -2895,24 +2895,13 @@
 ero,
- 
 0,
- 
 32,
- 16, 16, 
 tick
@@ -2904,32 +2904,31 @@
 tickX, tickY
+)
 , 1
-6, 16
+000
 );%0A         
@@ -3017,87 +3017,40 @@
     
-ctx.clearRect ( 0 , 0 , canvas.width, canvas.height );%0A                ctx.
+var animate = setInterval(
 draw
+My
 Imag
@@ -3060,23 +3060,12 @@
 ero,
- 
 0,
- 
 0,
- 16, 16, 
 tick
@@ -3068,32 +3068,31 @@
 tickX, tickY
+)
 , 1
-6, 16
+000
 );%0A         
@@ -3238,32 +3238,56 @@
             
-ctx.
+var animate = setInterval(
 draw
+My
 Image(hero, 
@@ -3289,24 +3289,13 @@
 ero,
- 
 0,
- 
 16,
- 16, 16, 
 tick
@@ -3298,32 +3298,31 @@
 tickX, tickY
+)
 , 1
-6, 16
+000
 );%0A         
@@ -3469,32 +3469,56 @@
             
-ctx.
+var animate = setInterval(
 draw
+My
 Image(hero, 
@@ -3520,24 +3520,13 @@
 ero,
- 
 0,
- 
 48,
- 16, 16, 
 tick
@@ -3529,32 +3529,31 @@
 tickX, tickY
+)
 , 1
-6, 16
+000
 );%0A         
@@ -3559,32 +3559,33 @@
     %7D%0A        %7D%0A
+%0A
         window.r

Add setInterval()