Jcanvas coordinates don't start at (0,0)

Question

I'm trying to get my head around HTML 5 canvas, trying jCanvas. But i'm experiencing a weird problem.

Im trying to draw an rectangle that should fill the whole canvas using the following code:

HTML

<canvas width=600 height=400></canvas>

JS:

var canvas = $("canvas");

//white background in canvas
canvas.drawRect({
        fillStyle: "#FFF",
        x: 0, y: 0,
        width: 600,
        height: 400
 });

This outputs a rectangle, but only half the intended size. If i change the x,y coordinates to half width/height, then i get the expected result. But from what I understand x,y should start from top left corner, right?

Fiddle

Philip G · Accepted Answer · 2013-12-08T11:26:08.127

3

I found the Answer. Apperently canvas needs one additional parameter to count coordinates from top left instead of center.

I changed the js code to:

var canvas = $("canvas");
//white background in canvas
canvas.drawRect({
        fillStyle: "#FFF",
        x: 0, y: 0,
        width: 600,
        height: 400,
        fromCenter: false
    });

And now it works as expected!

You can also change the default behavior by calling this method:

$.jCanvas({
    fromCenter: false
});

In the beginning of the script

edited Dec 08 '13 at 11:26

answered Dec 08 '13 at 10:59

Philip G

4,098
2
22
41

Nice find. You should accept your own answer. This way the question will be closed. – Dec 08 '13 at 11:53
I know, but i cant do that in two days! – Philip G Dec 08 '13 at 13:14

Jcanvas coordinates don't start at (0,0)

1 Answers1