Place circles over center

by Konstantin Cryman

HTML

<canvas id="MyCan"></canvas>

CSS

#MyCan{
  margin: 40px auto;
  width: 500 ;
  height: 500;
}


canvas {
    image-rendering: optimizeSpeed;             /* Older versions of FF          */
    image-rendering: -moz-crisp-edges;          /* FF 6.0+                       */
    image-rendering: -webkit-optimize-contrast; /* Safari                        */
    image-rendering: -o-crisp-edges;            /* OS X & Windows Opera (12.02+) */
    image-rendering: pixelated;                 /* Awesome future-browsers       */
    -ms-interpolation-mode: nearest-neighbor;   /* IE                            */
}

JavaScript

var canvas = document.getElementById('MyCan');
 canvas.width = 500;
 canvas.height =  500;
var context = canvas.getContext('2d');
    
  
function drawCircle ( x, y, color ){
      context.beginPath();
      context.arc( x, y, 4, 0, 2 * Math.PI, false );
      context.fillStyle = color;
      context.fill();
      context.lineWidth = 2;
      context.strokeStyle = '#003300';
      context.stroke();
}
    
    
    
var PosA = { 
  x: canvas.width/2, 
  y: canvas.height/2
}

drawCircle( PosA.x, PosA.y, '#ff0000' );


function placeOverCenter( cX, cY, radius, angle ){
	return {
  	x: cX + radius * Math.sin( angle ),
    y: cY + radius * Math.cos( angle )
  };
}


function positionsOverCircle( Point, Radius, count ){
    var singleRange = Math.PI/6;
    var totalRange = Math.PI/6 * count;
		var startDir = 0.3 + -(totalRange/2) ;
    var points = [];
    for( var i = 0; i < count; i++ ){
    		var nextRange = startDir+singleRange*i;
        var x  = Point.x + ( Radius * Math.sin( nextRange ) );
        var y  = Point.y + ( Radius * Math.cos( nextRange ) );
        points.push( x, y );
    }
		return points;
}
var frame = 0;
var dir1 = 0;
var dir2 = Math.PI;
window.addEventListener('mousemove', function(){
		frame++;
		context.clearRect(0, 0, canvas.width, canvas.height );
    
    dir2 += 0.1;
    dir1 += 0.1;
    
    var c1 = placeOverCenter( PosA.x, PosA.y, 50, dir1 );
    var c2 = placeOverCenter( PosA.x, PosA.y, 50, dir2 );
    
    drawCircle( c1.x, c1.y, '#00ff00');
    drawCircle( c2.x, c2.y, '#ff0000' );
    
});

				// drawCircle( x, y, '#00ff00' );
positionsOverCircle( PosA, 50, 2 );