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?
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