CODEWITHSUNDEEP
javascripthtmlcanvas
yeeen
yeeen

Reputation: 4945

Why the rect created in the canvas doesn't follow the width n height stated?

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/

Upvotes: 1

Views: 82

Answers (1)

Derek 朕會功夫
Derek 朕會功夫

Reputation: 94319

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.

Upvotes: 3

Related Questions