approxixmation of circle.

If you draw a small circle and scale it up, it'll seem distorted due to poor appoximation of circles with small radiuses. This script uses a circle with a radius of 10 as standard approximation.

by John kuoppala

HTML

<canvas id="canvas" height=500 width=500></canvas>

JavaScript

var c = document.getElementById("canvas");
var ctx = c.getContext("2d");

//Two referense circles.
ctx.beginPath();
ctx.strokeStyle = "#0f0"; //green
ctx.lineWidth = 1.25;
ctx.arc(250, 250, 180, 0, 2 * Math.PI, false);
ctx.stroke();
ctx.beginPath();
ctx.strokeStyle = "#0f0"; //green
ctx.lineWidth = 1.25;
ctx.arc(250, 250, 220, 0, 2 * Math.PI, false);
ctx.stroke();


ctx.save();
ctx.beginPath();
ctx.strokeStyle = "#f00"; //Red
ctx.lineWidth = 1.25 / 100;
ctx.scale(100,100);
ctx.arc(2.5, 2.5, 2, 0, 2 * Math.PI, false);
ctx.stroke();
ctx.restore();


drawSmallArc(2.5,2.5,2,100);

function drawSmallArc(x,y,r,scale) {
    var adjust = 10/r;
    ctx.save();
    ctx.beginPath();
    ctx.strokeStyle = "#00f";
    ctx.scale(scale/adjust, scale/adjust);
    ctx.lineWidth = 1.25 / scale * adjust;
    ctx.arc(x*adjust, y*adjust,r*adjust,0,2 * Math.PI, false);
    ctx.stroke();
    ctx.restore();
}