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

Answer 1

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