Question

I’m developing an application where users draw euclidean constructions on the HTML5 canvas. As such I can’t really limit the size of certain shapes. When exaploring very large circles being drawn on the screen I noticed that very large circles don’t have a constant radius.

To be more specific, a circle defined by two points, a center point and one specifing the radius doesn’t pass throught the radius point anymore!

Progressivly larger circles. These are all supposed to pass through point E.

The error doesn’t occure on multiples of 45 degrees = PI/4. Between these multiples the error is biggest (PI/8 for example)

Here is a jsfiddle containing the first example above:

http://jsfiddle.net/D28J2/2/

My questions: Why does this occure? and Is there some way to (efficently) work around this?

Answer 1

The way I worked around this issue completely was roll my own implementation of a circle draw approximation with bezier curves. An article detailing the implementation can be found here http://www.tinaja.com/glib/ellipse4.pdf.

function magic_circle(ctx, x, y, r){
  m = 0.551784

  ctx.save()
  ctx.translate(x, y)
  ctx.scale(r, r)

  ctx.beginPath()
  ctx.moveTo(1, 0)
  ctx.bezierCurveTo(1,  -m,  m, -1,  0, -1)
  ctx.bezierCurveTo(-m, -1, -1, -m, -1,  0)
  ctx.bezierCurveTo(-1,  m, -m,  1,  0,  1)
  ctx.bezierCurveTo( m,  1,  1,  m,  1,  0)
  ctx.closePath()
  ctx.restore()
}

With just these four segements I was able to approximate a circle much better then the build in google chrome canvas implementation.