jqueryhtmlcanvashtml5-canvasjcanvas

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


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


Solution

  • 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