Creating non-connected circles with graphics.arc()

Recommended Posts

16 hours ago, sambenson said:

Hi all, 
I'm using graphics.arc() to make two circles that aren't joined

Here's a basic example - 

As you can see the circles are joined - how do I avoid this? 

Cheers in advance!

Well if you mean you want them not to be closed arcs, you should remove the 2*PI radian and make it less than 2*PI:

graphics.arc(width/2, height/2, 50, 0, Math.PI);

Will make half of it.

if you want them to offset from each other:


var width = 800,
    height = 230,
    app = new PIXI.Application(width, height, { antialias: true, transparent: true }),
    graphics = new PIXI.Graphics();


var startX = width/4 + (Math.cos(0) * 50);
var startY = height/2 + (Math.sin(0) * 50);

graphics.moveTo(startX, startY);

graphics.lineStyle(7, 0xB3B3B3, 1);
graphics.arc(width/4, height/2, 50, 0, Math.PI*2

var startX = width/1.5 + (Math.cos(0) * 100);
var startY = height/2 + (Math.sin(0) * 100);

graphics.moveTo(startX, startY);

graphics.lineStyle(7, 0xBADA55, 1);
graphics.arc(width/1.5, height/2, 100, 0, Math.PI*2


Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.