var canvas = document.getElementById('cv');

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

​

var circles = [];

​

function createCircles(cnt) {

  circles = [];

  for (var i=0; i<cnt; i++) {

    var x = 5+ Math.random() *300;

    var y = 5+ Math.random() *300;

    var r = 20  + Math.random() *6;    

    circles.push({x:x,y:y,r:r});

  }

}

​

function drawLines() {

  var cnt= circles.length;

   ctx.strokeStyle = '#000';

  ctx.lineWidth = 2;

  ctx.beginPath();

  ctx.moveTo(circles[0].x, circles[0].y);

  for (var i=1; i<cnt; i++) {

     ctx.lineTo(circles[i].x, circles[i].y);

  }

  ctx.stroke(); 

}

​

function drawCircles() {

  var cnt= circles.length;

   ctx.fillStyle = '#4A8';

  for (var i=0; i<cnt; i++) {

     ctx.beginPath();

     ctx.arc(circles[i].x, circles[i].y, circles[i].r, 0, 6.282);

     ctx.fill();

  }

}

​

createCircles(4);

drawLines();

drawCircles();