为什么在画布中创建的矩形不遵循所述的宽度n高度？

Question

I have a div, inside the div I have a canvas and I need to create a rect in the canvas..

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);

but the rect turns out to be not 50px n 50px away from the top n left and the height is much greater than the width... Why?

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

Answer 1

It is because you did not set the width and height of the <canvas> in the HTML.
It is default to be in 1:1 ratio, and since you make it 100:300 in CSS, its width shrinks by 1/3 .