Drawing circles

[Nebulocity]

I want to do two things:

1. Draw concentric circles
2. Not have them "filled"

At first, I tried doing the following:

	var ctx = this.game.canvas.getContext('2d');	// First circle	ctx.beginPath();	ctx.arc(game.world.centerX, game.world.centerY, 50, 0, 360);	ctx.lineWidth = 1;	ctx.strokeStyle = 'red';	ctx.stroke();	// Second circle	ctx.beginPath();	ctx.arc(game.world.centerX, game.world.centerY, 100, 0, 360);	ctx.lineWidth = 1;	ctx.strokeStyle = 'green';	ctx.stroke();	// Third circle	ctx.beginPath();	ctx.arc(game.world.centerX, game.world.centerY, 150, 0, 360);	ctx.lineWidth = 1;	ctx.strokeStyle = 'blue';	ctx.stroke();	// The alert acts as a "pause" so that I can see the circles drawn,	// Before they get drawn over by displaying my sprites in phaser.	alert('pause');

 

So it works! 

But then (after the alert), my sprites and whatnot drawn in Phaser show up, which erases the circles that I drew.  I want these circles to show up as part of my background (without having to resort to a background image for the canvas).  I tried rummaging around in the Phaser documentation, and while there is a Phaser.Circle class, doesn't seem to have a "no fill" propert to it.  But even with that being said, drawing circles like this doesn't work.

	circle = new Phaser.Circle(game.world.centerX, game.world.centerY, 100)

Nothing shows up at all.

 

So I'm not sure what I should be doing...if I draw it on the canvas directly, it gets overwritten.  If I try drawing circles with Phaser (although, they're "filled" from what I can tell in the examples), they don't show up.

 

Any help would be appreciated.

[lewster32]

You shouldn't be drawing directly to Phaser's canvas context - that defeats the point of using Phaser in the first place. Anything drawn to the canvas and not managed by Phaser's scene graph will be instantly cleared on the next update (which is what is happening after your alert). Also, the Phaser.Circle object is an abstract object used for circle-based calculations, not a display object. What you need to use is a graphics object. Much of the documentation for this is found here in the underlying pixi graphics object.

// add a new graphics object at the center of the worldvar circles = game.add.graphics(game.world.centerX, game.world.centerY);// add first 1px wide unfilled red circle with a radius of 50 at the center (0, 0) of the graphics objectcircles.lineStyle(1, 0xff0000);circles.drawCircle(0, 0, 50);// add the second 1px wide unfilled green circle with a radius of 100circles.lineStyle(1, 0x00ff00);circles.drawCircle(0, 0, 100);// and finally add the third 1px wide unfilled blue circle with a radius of 150circles.lineStyle(1, 0x0000ff);circles.drawCircle(0, 0, 150);

[Nebulocity]

Ahh, I see. Thank you for that clarification. The reason why i was trying to use Phaser.Circle is because I want to make a sprite move along the path if the circle. I guess i got confused in what that class was for. Cheers!