ofPolyline arcs rendering with "corners"/divots with line width greater than 1

#1

I’m trying to draw empty circles with strokes thicker than 1px. Using ofPolyline but it’s rendering with these weird little divots in its 4 “corners”:

    ofPoint pos = ofPoint(100, 100);
    int rad = 40;

    ofSetColor(255, 0, 0);
    ofNoFill();
    ofSetLineWidth(5);

    ofPolyline circle;
    circle.arc(pos, rad, rad, 0, 360, 360);
    circle.close();
    circle.draw();

If I increase the stroke width and give it some transparency you can see it’s sort of flipping over itself or rendering in 2 pieces:

What’s causing this? How can I draw a simple circle with >1 stroke width with reasonable code complexity?

#2

I’ve encountered a similar problem, and I was directed to ofxShivaVG

I never ended up using it as it wasn’t crucial for my purposes, and I just reduced line width so it wasn’t as visible. It seems an SVG drawing would do the trick.

#3

Thanks!

1 Like
#4

I’m using cairo renderer when needing antialias precision, and strokes much bigger than 20px.
Slower than openGL but works

#5

I read somewhere that Cairo is slow.
What about NanoVG addons?