Drawing squares with createJS creates rectangles

Question

Apart from the title not being entirely correct I'm having a problem drawing squares with createJs. I'm drawing rectangles with equally big sides which in general generates a square, but not for me, I'm getting this:

The code I'm using is as follows (very much simplified):

function getRandomNumber(max)
    {
        return Math.floor(Math.random() * max);
    }

var colors = ["Red", "Green", "Blue"];

function createTileArea()
    {
        var stage = new createjs.Stage("tileArea");
        stage.name = "stage";
        var size = 50;

        for (row = 0; row < 10; row++) {
            for (col = 0; col < 10; col++) {
                var id = row + "_" + col;
                var color = colors[getRandomNumber(3)];

                var tile = new createjs.Shape();
                tile.graphics.beginFill(color);
                tile.graphics.drawRect(0, 0, size, size);
                tile.graphics.endFill();
                tile.x = col * size;
                tile.y = row * size;
                tile.height = size;
                tile.width = size;
                tile.name = id;

                stage.addChild(tile);
            }
        }

        stage.update();
    }

createTileArea();

I have a fiddle here: http://jsfiddle.net/QWP3Z/2/

My question is: I have a canvas that has 500px width and height and I'm generating 10 rectangles that are 50px high and wide, so why am I getting 6 horizontal squares and three vertical squares that are all rectangles? Is this some sort of scaling problem?

Answer 1

do not use the css style to resize the canvas, but rather change its width and height directly, either in html or in code. Otherwise createJs will set the width and height, which seems to default to 300X150, and the css will act as a zoom to put it back to -in your example- 500X500.