function draw() {
var ctx = document.getElementById('canvas').getContext('2d');
ctx.translate(75, 75);
for (var i = 1; i < 6; i++) {
ctx.save();
ctx.fillStyle = 'rgb(' + (51 * i) + ',' + (255 - 51 * i) + ',255)';
for (var j = 0; j < i * 6; j++) {
ctx.rotate(Math.PI * 2 / (i * 6));
ctx.beginPath();
ctx.arc(0, i * 12.5, 5, 0, Math.PI * 2, true);
ctx.fill();
}
ctx.restore();
}
}
<html> <body onload="draw();"> <canvas id="canvas" width="300" height="300"></canvas> </body> </html>