Q:

weird behavior inside canvas when animating a human stripes

this is my jsfiddle : http://jsfiddle.net/yKvuK/6/
if (keydown.right) {
                characterImg.src = 'http://pixenate.com/pixenate//cache/photo_e2094a30725ccd74a6d889648d34343b.jpg';
                character. CurentPos++;

                character.x += character.speed;

                if (character.x > CanvasWidth - character.width) { // make the character keep walking even if he step outside the canvas
                    character.x = 0;
                }

            }

            if (keydown.up) {
                characterImg.src = "http://pixenate.com/pixenate//cache/photo_1_5ef90294cd2afeb4486dedd663cfd872.jpg";
                character.y -= character.speed;

                if (character.y < 0) {
                    character.y = 0;
                }
                 character. CurentPos++;

            }

            if (keydown.down) { //going down
                characterImg.src = "http://pixenate.com/pixenate//cache/photo_1_ff6712ddd80b138f1865eb4937622d1b.jpg";
                character. CurentPos++;

                character.y += character.speed;
                if (character.y > CanvasHeight - character.height) {
                    character.y = CanvasHeight - character.height;
                }
            }

you can see the problem when trying to move the character up and down can anyone help me ? 

A:

You need to create a new version of your images, I mean make a new png file one for each.  jpg does not support transparency. 
(I made on for you, you can see in the url under)
When you have the files you can do like:
var characterImgL = new Image(); // Image Left to be loaded and drawn on canvas
var characterImgR = new Image(); // Image Right to be loaded and drawn on canvas
var characterImgU = new Image(); // Image Up to be loaded and drawn on canvas
var characterImgD = new Image(); // Image Down to be loaded and drawn on canvas

...

function init() {
     characterImgL.src = "http://david.blob.core.windows.net/easeljstutorials/img/MonsterARun.png";
     characterImgR.src = "http://s23.postimg.org/8j8gi9owb/Monster_ARun_R.png";
     characterImgU.src = "http://s23.postimg.org/8j8gi9owb/Monster_ARun_R.png";
     characterImgD.src = "http://s23.postimg.org/8j8gi9owb/Monster_ARun_R.png";
     characterImg = characterImgL;  //Start image = Left image
 }

and then on each movement you assign the characterImg to the right one. 
Like 
characterImg = characterImgR; if movement to right
characterImg = characterImgL; if movement to left

Check the fiddle, the left / right is working, the up, down you have to fix png for that it will take some minutes to rotate each frame. 
(you can copy the .png for the right movement from the url in the fiddle)
Option 1: (the easy way)
Use as in the fiddle.  Notice that the Monster_ARun_R.png image is almost correct, it has 10 images inside it and they should change position.  The one you see to the left should be in the right looking to the right.  The second one should be the next last (also looking to the right, ect)
Example (numbers are images):
1 2 3 4 5 6 7 8 9 10 should be 10 9 8 7 6 5 4 3 2 1 BUT looking to the right (otherwise is the same as MonsterARun.png
Option 2: (a bit more work)
If you will have Right, Left, Up & Down movement you need a different png/file for each movement.  Each png file is made of several images to make an animation.  The one I fixed I just flipped horizontally the original png file (like mirror view) but to be well done you need to also invert the order of each image.  And then the same for up & down movement.  AND all png files are horizontal.  The ones you put in your fiddle are vertical you need a image like this:

