CodePen

HTML

            
              <canvas id="canvas"></canvas>
            
          
!

CSS

            
              canvas { background-color: gray; }
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              var canvas = $("#canvas")[0];
canvas.width = 200;
canvas.height = 200;

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


var centerX = canvas.width/2;
var centerY = canvas.height/2;
var radius = canvas.width/4;
var steps = ~~(12 * Math.pow(radius/2, 1/3) );

steps = 6;

//start/end degrees
var start = 0 * (Math.PI / 180);
var end = 180 * (Math.PI / 180);

var maxX = 0;
var maxY = 0;
var minX = Number.MAX_VALUE;
var minY = Number.MAX_VALUE;


 
for (var i=0; i<steps; i++) {
  var t = i/(steps-1);
  var angle = start + (end - start) * t;
  
  var x = Math.cos(angle) * radius + centerX;
  var y = Math.sin(angle) * radius + centerY;
  
  ctx.fillStyle = "black";
  ctx.fillRect(x, y, 5, 5);

  ctx.fillStyle = "white";
  var u = ((x-centerX) / (radius*2)).toFixed(2);
  var v = ((y-centerY) / (radius*2)).toFixed(2);

    ctx.fillText("("+u+","+v+")", x, y);
}
ctx.fillText(steps, 10, 10);
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................