Drawing perfectly circular arcs with HTML5 Canvas + KineticJS

Question

I'm currently trying to draw arcs using the KineticJS canvas framework. The issue I'm having is that these arcs are not nearly as "perfectly" circular as required.

They're being drawn out as follows:

var redArc = new Kinetic.Shape({
    drawFunc: function (canvas) {
        var ctx = canvas.getContext();
        ctx.beginPath();
        ctx.arc(x, y, r, 0, Math.PI / 2, true);    // Arc of 270°
        canvas.fillStroke(this);
    },
    x: x,
    y: y,
    stroke: 'rgb(255,0,0)',
    strokeWidth: 20,
    offset: [x, y]
});

I knew that this might have been an issue since there's no such thing as rendering a near-perfect circle on a pixel based medium without the use of anti-aliasing on the stroke

I was wandering if this issue might be resolved by rendering with vector graphics or if there was an alternative solution?

I've included a JSFiddle to outline this issue, the circles are being animated rotating around their axis. This effect is more apparent with the arc(s) appearing to "wobble" as they rotate.

JSFiddle: http://jsfiddle.net/EHDFV/

Answer 1

Could the wobble be an optical illusion.

Have added a stationary black circle around your animation.

var blackCircle = new Kinetic.Shape({
    drawFunc: function (canvas) {
        var ctx = canvas.getContext();
        ctx.beginPath();
        ctx.arc(x, y, (r + 10), 0, 2 * Math.PI, true);
        canvas.fillStroke(this);
    },
    x: x,
    y: y,
    stroke: 'rgb(0,0,0)',
    strokeWidth: 1,
    offset: [x, y]
});

Does your wobble cross the black circle at any point or leave a gap?

New fiddle http://jsfiddle.net/EHDFV/1/