Rotating graphics object, Graphics vs Canvas

[Vaclav]

Hello,

 

I'm drawing on a Graphics object, how can I rotate it around it's center? Setting the angle rotates around top left corner, and it doesn't have anchor property, I can't find anything for it in the API.

 

Or should I rather use a Bitmapdata object (canvas)? I see no difference between the two, except that I guess Graphics uses Pixi/Webgl and Bitmapdata is a canvas. That means one would use Graphics object for performance? But canvas can also be hardware accelerated. I'm a little confused, can someone explain me, please?

[lewster32]

Position the shapes themselves appropriately within the graphics object, like so:

var graphics = game.add.graphics();// center the graphics object in the worldgraphics.x = game.world.centerX;graphics.y = game.world.centerY;graphics.beginFill(0xffffff);// draw a rectangle at -20, -20 (relative to the graphics object) with a width and height of 40, effectively centering itgraphics.drawRect(-20, -20, 40, 40);function update() {  // rotate it around its registration - which in graphics is always on its 0, 0 point - but because  // we've offset the shapes inside it to compensate, it will appear to turn at its center  graphics.angle++;}

See this in action here: http://jsfiddle.net/lewster32/Zexs6/

[Vaclav]

Thank you, that  works. I don't know why but I thought I can't draw at the negative coordinates.

 

What about the graphics vs canvas part?

[lewster32]

Graphics are vector, they scale without any loss of detail as in my jsfiddle example. BitmapData is for when you either need specific canvas operations or, more likely, you need to perform operations at the pixel level, rather than just via shapes. BitmapData and Graphics both work in canvas and webGL, however there are some subtle differences in functionality with Graphics in webGL - but in most cases you won't bump into them.