Почему созданный на холсте прямоугольник не соответствует указанной ширине и высоте?

Question

У меня есть div, внутри div у меня есть холст, и мне нужно создать прямоугольник на холсте ..

this.canvas = {
            innerElement: TBE.CreateRectCanvasElement (Element.config.displayWidth, Element.config.displayHeight)
        };
    this.canvas.innerElement.style.border = '1px solid black';
    this.innerElementCtx = this.canvas.innerElement.getContext("2d");
    this.innerElementCtx.fillStyle = '#3ac6e5';
    this.innerElementCtx.fillRect(50, 50, 100, 100);

но прямоугольник оказывается не на 50px n на 50px от верхнего n слева, а высота намного больше ширины ... Почему?

http://jsfiddle.net/dpQ64/3/

Answer 1

Это потому, что вы не установили ширину и высоту <canvas> в HTML.
По умолчанию используется соотношение 1:1, и поскольку вы задаете 100:300 в CSS, его ширинасокращается на 1/3.