Getting pixel color from bitmap (javascript) not working

Question

I am working on a simple game using Three.js on javascript. I need to use a bitmap to create the scenario. My bitmap is basically a 15x15 pixel

All I want to do is get the rgb value for every pixel on this image. This is the code I have so far:

function World()
{
    var cubeMatrix = [];

    this.makeScenario = function(scene)
    {
        var context = document.getElementById('canvas').getContext('2d');
        var img = new Image();
        img.src = 'bitmap/map1.bmp';
        context.drawImage(img,0,0);
        var imgData = context.getImageData(0, 0, canvas.height, canvas.width);

        var cube = new Cube();
        cube.makeCube(1,1,MOVABLE_CUBE);

        var i, j;
        for(i = 0; i < MATRIX_SIZE; i++) //x
        {
            for(j = 0; j < MATRIX_SIZE; j++) //z
            {
                var rgba = getPixel( imageData, i, j);

                if(rgba.r == 255 && rgba.g == 255 && rgba.b == 255) //white
                {
                    cube.pushCube();

                }
            }
        }

    }
}

This is the code I'm using to get the pixel

function getPixel( imagedata, x, y ) 
{

    var position = ( x + imagedata.width * y ) * 4, data = imagedata.data;
    return { r: data[ position ], g: data[ position + 1 ], b: data[ position + 2 ]};

}

also added this to the html body:

<canvas id="canvas" width="15"height="15"></canvas>

I created a cube and changed its position when entering that "if" (enters when color is white), but the cube never moves at all!

I made some tests and found out that all rgb values are actually 0.

Can someone please help me with this? Thank you!

Note: this functions are on a different file from the html, but linked to it by

<script src="world.js"></script>