Forums » Help » How to draw a scalable circle (best practice)

Hello, I'd like to draw circles in my game to show the orbit of planet entities around a star much like this image:

http://www.inquisitr.com/wp-content/2011/09/Solar-System-As-It-Stands-Now.jpg

The two methods that come to mind are:

1) Start with a PNG with the ring then scale it based on the diameter reflecting each planet's orbit such as this one: http://dev.spacetrademobile.com/client/Public/media/ring.png

2) Draw a basic circle shape directly to the canvas (this forum entry seems to give an example as to how: http://impactjs.com/forums/impact-engine/drawing-a-simple-cube)

Thoughts on the best approach? Ideally I'd like to use a png and scale it but I can't seem to figure out how to do that (if anyone knows how to apply a scale to an Image or Animation that'd be great. I tried messing with Image.width / height but couldn't get anything but a crop to happen). I will need to apply a global scale to the entire canvas at some point, too. Not sure if that limits one's ability to apply a separate scale to an individual image.

If scaling a png isn't possible right now I'll shoot for #2 above. Unfortunately I'll have hundreds of planets all at different orbits so I won't be able to create separate ring pngs for each diameter.

Thanks for any thoughts on the matter!

If I were you I'd use the canvas method. It's quick and light and scales great (if you factor in ig.system.scale.

draw: function(){
	var ctx = ig.system.context;
	ctx.strokeStyle = this.color;  //some color
	ctx.beginPath();
	ctx.arc( ig.system.getDrawPos( this.pos.x - ig.game.screen.x ),
			ig.system.getDrawPos( this.pos.y - ig.game.screen.y ),
			this.radius * ig.system.scale,
			0, Math.PI * 2 );
	ctx.stroke();
}

Change this.radius as needed.

I read that if you use the direct canvas method you can't use IOSImpact... but yea it sounds like that's the best approach. Thanks for the example quidmonkey I'll check it out!