Unable to dynamically increment a property of an object

I'm trying to create a dynamic canvas animation using javascript. The intent is to increment the x property of many image objects and then draw them in the x position of the updated x property each time a draw() function runs. I'm not able to successfully increment this x property though - for some reason it always resets to 0.

I defined this global array to contain all the objects I will draw:

window.character = [];

I have this object constructor to create new image objects:

function Character(name, x, y){
    //define the image object within the Character
    this.imageObject = new Image();
    this.imageObject.src = name+'iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAW0lEQVR42mL8//8/AzpgZGTcC6KBcs5wMRwK/0MVMsLEmLAoEmXAApiwiKUhaRJCltgLsQVsWwIQ/wTx0fBeRigD7B6Y24i1mj4Kn4KI7Uie2Y7FI8+B2AMgwABjRynfWgpcxQAAAABJRU5ErkJggg==';

    window.character.push(this);
    window.characterPosition = window.character.indexOf(this);

    //set natural width and natural height once the image is loaded
    if (this.imageObject.addEventListener){
        this.imageObject.addEventListener('load', function(){
            window.imgWidth = this.naturalWidth/2;
            window.imgHeight = this.naturalHeight/2;

            //set natural width and natural height to object
            window.character[characterPosition]['imageObject']['w'] = window.character[characterPosition]['imageObject']['w0'] = window.imgWidth;
            window.character[characterPosition]['imageObject']['h'] = window.character[characterPosition]['imageObject']['h0'] = window.imgHeight;

            //set initial x and y position
            console.log(x);
            window.character[characterPosition]['imageObject']['x'] = x;
            window.character[characterPosition]['imageObject']['y'] = y;
            console.log(window.character[characterPosition]['imageObject']['x']);
            //set loaded property for the object once loading is done
            window.character[characterPosition]['imageObject']['loaded'] = true;

            function imageLoaded(element, index, array){
                return element['imageObject']['loaded'] == true;
            }

            //test whether every object in array has the image loaded
            if(character.every(imageLoaded)){
                $('button#play').show();
            };
        });
} //end object constructor

Inside that constructor function, there is some weird behavior. I created a new object using:

var sun0 = new Character('data:text/javascript;base64,', 12, 12);

Then here's what I see from the console.log messages inside the object constructor:

console.log(x); //returns 12, as expected
window.character[characterPosition]['imageObject']['x'] = x;
window.character[characterPosition]['imageObject']['y'] = y;
console.log(window.character[characterPosition]['imageObject']['x']); //returns 0. Thought it would be 12

Ultimately, here's how I intend to animate the object across the screen. This draw() function runs on an interval every 10ms.

function draw(){
    clear();

    //draw characters
    drawCharacter(window.character[0]['imageObject'],window.character[0]['imageObject']['x'],window.character[0]['imageObject']['y'],window.character[0]['imageObject']['w'],window.character[0]['imageObject']['h']);
    window.character[0]['imageObject']['x'] += 10;
    console.log(window.character[0]['imageObject']['x']); //returning 0 every time, not incrementing the way I expected it to.
}

How can I get this 'x' property to increment?

here's the JS Fiddle

Pointy answered your question in the comments, but to expand on this... you're trying to set x on an Image which can't be set. For instance, try this in your browser's console:

var img = new Image();
img.x = 1;
console.log(img.x); // this will be zero

That's effectively what you're doing. Additionally, in your code try changing ['x'] to ['myX'] and then it will work as expected.