Img added by Javascript showing 0x0 pixels

I'm trying to add the same small image multiple times to a canvass. It shows in Inspect Elements correctly, except that the images have 0x0 pixels (natural is 200x45 or something).

Here's the code:

function addbgd1(){
    this.obj = document.createElement('img');
    this.obj.src = 'img/bgd1.png';
    this.obj.classList.add('bgd1img');
    //this.obj.width = 100;
    //this.obj.height = 22;
    this.obj.style.top = Math.floor((window.innerHeight * Math.random())) + 'px';
    this.obj.style.left = Math.floor((window.innerWidth * Math.random())) + 'px';
    bgd1.appendChild(this.obj);
}


function drawbgd1(){
    nbgd1 = Math.floor(WIDTH / 50);
    for(var i=0; i<nbgd1 ; i++){
        bgd1imgs.push(new addbgd1());
    }
}

I have var bgd1 as the canvas (screen sized); WIDTH is the screen width.

Completely lost here. I've tried several variations of CSS but there's no difference.

Thanks!