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 drawn with 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]

See my post on your other topic: http://www.html5gamedevs.com/topic/7220-drawing-circles/