As @Philipp suggests, your code works when I make sure the images are fully loaded before trying to drawImage them.
Here's an image loader that fully loads all image and then calls your code in the start() function:
// first load all your images
var imageURLs=[];
var imagesOK=0;
var imgs=[];
// put the URLs to any images you need in the imageURLs[] array
imageURLs.push("yourCharImg.png");
loadAllImages(start);
function loadAllImages(callback){
for (var i=0; i<imageURLs.length; i++) {
var img = new Image();
imgs.push(img);
img.onload = function(){
imagesOK++;
if (imagesOK>=imageURLs.length ) {
callback();
}
};
img.onerror=function(){alert("image load failed");}
img.crossOrigin="anonymous";
img.src = imageURLs[i];
}
}
// after all images are loaded, start using the images here
function start(){
// the imgs[] array holds fully loaded images
// the imgs[] are in the same order as imageURLs[]
// get an image from the imgs[] array
var charImg=imgs[0]; // or whatever image index you need
// draw a flipped image
var flippedCharImg = flip(charImg);
ctx.drawImage(flippedCharImg,
character.xpos, character.ypos,
character.stopped.width, character.stopped.height
);
}