phaser framework - drawing a circle with bitmapData -

my understanding preferable use bitmapdata object add graphics manipulate physics engine.

so, i've been trying draw circles bitmapdata objects.

i've tried 2 method have both failed different reasons.

1) followed example: http://phaser.io/exa...from-bitmapdata

replacing rect circle document here: http://phaser.io/doc...ta.html#circle:

var bmd = game.add.bitmapdata(128,128);

// draw canvas context normal bmd.ctx.beginpath(); bmd.ctx.circle(0,0,128); bmd.ctx.fillstyle = '#ff0000'; bmd.ctx.fill(); 

the rect method demonstrated in example works fine me, when change circle have above gives error: undefined not function, on line: bmd.ctx.circle(0,0,128);

also, confuses me because, both circle , rect listed public methods of bitmapdata, not of ctx.

i not understand difference between bitmapdata.context , bitmapdata.ctx

2) coded following example found online:

    bmd.ctx.fillstyle = '#999999';     bmd.ctx.beginpath();     bmd.ctx.arc(25, 25, 100, 0, 2*math.pi, true);      bmd.ctx.fill(); 

this produces quarter of circle, despite being set amount of radians of full circle.

1)

• bitmapdata creates canvas object.

• bitmapdata.context refers 2dcontext of canvas.

  with said :

• bitmapdata.ctx reference of bitmapdata.context

• circle helper method provided bitmapdata. 'undefined' error because calling bitmapdata.ctx , not bitmapdata directly.
• you got confused because canvas object has .rect() method,
  while bitmapdata got 1 too different.
  that's why bmd.ctx.rect() works bmd.ctx.circle() doesn't.

2) reason see quarter because set bitmapdata size small (128 x 128) circle asking phaser draw.
placing center of circle @ {x:25, y:25} , draw 100px radius, getting out of space.

lower radius, place center @ center of bitmapdata's context created, , see correct result:

 bmd.ctx.arc(bmd.width / 2, bmd.height / 2, 50, 0, 2 * math.pi, true);