0

I have a problem with jCanvas which is a framework drawing canvas and jquery.

When I set x = 0 , y = 0 The .drawRect output should be same as the pure javascript result.

I tried the document and google but I did not find anything to solve this.

Screen shoot:

Pure js result

jCanvas result

Please help me.

Many thanks.

// Pure javascript
var canvas = document.getElementsByTagName('canvas')[0];
var ctx = canvas.getContext("2d");
ctx.fillStyle = 'blue';
ctx.fillRect(0, 0, 100, 100);

// jCanvas
$('canvas').drawRect({
  fillStyle: '#000',
  x: 0, y: 0,
  width: 100,
  height: 100
});

To run this code, please copy and pass to this sanbox. https://projects.calebevans.me/jcanvas/sandbox/

Thai Lan
  • 21
  • 1

1 Answers1

2

From jCanvas documentation:

The [.drawRect's] fromCenter property determines if a rectangle’s x and y properties lie at its center (as opposed to its top-left corner). This property is true by default.

So yeah. Your X and Y with jCanvas, refer to the center of the rectangle, unlike canvas' fillRect X and Y, which refer to the top left corner of the rectangle.

thykka
  • 540
  • 2
  • 12