Circle that increases + text on the side

Project Feedback
#1

CODE JavaScript code

// c.fillStyle = 'hsl(' + 360*Math.random() + ',' + 100*Math.random() + '%,' + 100*Math.random() + '%)';
//math.random function
function MathR(min, max) {
  return Math.random() * (max - min) + min;
}
console.log("Working!");

//Tutorial function
(function(){
  //Get the code from html and make it 2d with variable c
function init(){
      var canvas = document.getElementsByTagName('canvas')[0];
      var c = canvas.getContext('2d');

//Tutorial code goes under here vvvvvvvvvvvvvvvvvvvvv


c.fillStyle = 'black';
c.fillRect(0,0,canvas.width,canvas.height);

//text
var textN = 1;




c.fillStyle = 'orange';
c.font = "normal bold 4em sans-serif";




//animation and stuff

var radius = 1;
  var color = 1;

var fillMoreR = 1;
var fillLessR = 10;
var eraseMoreR = 9;
var eraseLessR = 11;
var text = 'stage';
// the function
function draw() {
color +=2;



  c.fillStyle = 'hsl(' + color + ',100%,50%)';
  c.beginPath();
  c.arc(500,500,radius,0,2*Math.PI,false);
  c.fill();
  radius += 0.1;
  //text animation
  c.fillStyle = 'orange';
  // less than or more than loop



//stage loop
fillMoreR = 1;
fillLessR = 10;
eraseMoreR = 9;
eraseLessR = 11;
textN = 1;

c.lineWidth = 0;
if(radius > 1 && radius < 10){
  textN = 1;
  text = "stage: " + textN + '';
} else if (radius > 9 && radius < 11){
  c.fillStyle = 'black';
  c.lineWidth = 4;
  c.fillRect(0,0,1000,200);

  c.strokeText(text, 50, 100);
  text = "stage: " + textN + '';
} else if (radius > 11 && radius < 20 ){
  textN = 2;
  text = 'stage: ' + textN + '';
} else if (radius > 19 && radius < 21){
  c.fillStyle = 'black';
  text = "stage: " + textN + '';
  c.lineWidth = 4;
    c.fillRect(0,0,1000,200);
  c.strokeText(text, 50, 100);
} else if (radius > 21 && radius < 30){
  textN = 3;
  text = 'stage: ' + textN + '';
}else if (radius > 29 && radius < 31){
  c.fillStyle = 'black';
  text = "stage: " + textN + '';
  c.lineWidth = 4;
    c.fillRect(0,0,1000,200);
  c.strokeText(text, 50, 100);
  c.fillText(text, 50, 100);
} else if (radius > 31 && radius < 40){
  textN = 4;
  text = 'stage: ' + textN + '';
}else if (radius > 39 && radius < 41){
  c.fillStyle = 'black';
  text = "stage: " + textN + '';
  c.lineWidth = 4;
    c.fillRect(0,0,1000,200);
  c.strokeText(text, 50, 100);
} else if (radius > 41 && radius < 50){
  textN = 5;
  text = 'stage: ' + textN + '';
}else if (radius > 49 && radius < 51){
  c.fillStyle = 'black';
  text = "stage: " + textN + '';
  c.lineWidth = 4;
    c.fillRect(0,0,1000,200);
  c.strokeText(text, 50, 100);
} else if (radius > 51 && radius < 60){
  textN = 6;
  text = 'stage: ' + textN + '';
}else if (radius > 59 && radius < 61){
  c.fillStyle = 'black';
  text = "stage: " + textN + '';
  c.lineWidth = 4;
    c.fillRect(0,0,1000,200);
  c.strokeText(text, 50, 100);
} else if (radius > 61 && radius < 70){
  textN = 7;
  text = 'stage: ' + textN + '';
}else if (radius > 69 && radius < 71){
  c.fillStyle = 'black';
  text = "stage: " + textN + '';
  c.lineWidth = 4;
    c.fillRect(0,0,1000,200);
  c.strokeText(text, 50, 100);
} else if (radius > 71 && radius < 80){
  textN = 8;
  text = 'stage: ' + textN + '';
}else if (radius > 79 && radius < 81){
  c.fillStyle = 'black';
  text = "stage: " + textN + '';
  c.lineWidth = 4;
    c.fillRect(0,0,1000,200);
  c.strokeText(text, 50, 100);
} else if (radius > 81 && radius < 90){
  textN = 9;
  text = 'stage: ' + textN + '';
}else if (radius > 89 && radius < 91){
  c.fillStyle = 'black';
  text = "stage: " + textN + '';
  c.lineWidth = 4;
    c.fillRect(0,0,1000,200);
  c.strokeText(text, 50, 100);
} else if (radius > 91 && radius < 100){
  c.fillStyle = 'blue';
  textN = 10;
  text = 'stage: ' + textN + '';
}else if (radius > 99 && radius < 101){
  c.fillStyle = 'black';
  text = "stage: " + textN + '';
  c.lineWidth = 4;
    c.fillRect(0,0,1000,200);
  c.strokeText(text, 50, 100);
} else if (radius > 101 && radius < 110){
  textN = 11;
  text = 'stage: ' + textN + '';
}else if (radius > 109 && radius < 111){
  c.fillStyle = 'black';
  text = "stage: " + textN + '';
  c.lineWidth = 4;
    c.fillRect(0,0,1000,200);
  c.strokeText(text, 50, 100);
} else if (radius > 111 && radius < 120){
  textN = 12;
  text = 'stage: ' + textN + '';
}else if (radius > 119 && radius < 121){
  c.fillStyle = 'black';
  text = "stage: " + textN + '';
  c.lineWidth = 4;
    c.fillRect(0,0,1000,200);
  c.strokeText(text, 50, 100);
} else if (radius > 121 && radius < 130){
  textN = 13;
  text = 'stage: ' + textN + ' getting there!';
}else if (radius > 129 && radius < 131){
  c.fillStyle = 'black';
  text = "stage: " + textN + ' ';
  c.strokeText(text, 50, 100);
      c.fillRect(0,0,400,200);
} else if (radius > 131 && radius < 140){
  textN = 14;
  text = 'stage: ' + textN + '';
}else if (radius > 139 && radius < 141){
  c.fillStyle = 'black';
  text = "stage: " + textN + '';
  c.lineWidth = 4;
    c.fillRect(0,0,400,200);
  c.strokeText(text, 50, 100);
} else if (radius > 141 && radius < 150){
  c.fillStyle = 'green';
  textN = 15;
  text = 'stage: ' + textN + '';
}else if (radius > 149 && radius < 151){
  c.fillStyle = 'black';
  text = "stage: " + textN + '';
  c.lineWidth = 4;
    c.fillRect(0,0,400,200);
  c.strokeText(text, 50, 100);
} else if (radius > 151 && radius < 160){
  textN = 16;
  text = 'stage: ' + textN + '';
}else if (radius > 159 && radius < 161){
  c.fillStyle = 'black';
  text = "stage: " + textN + '';
  c.lineWidth = 4;
    c.fillRect(0,0,400,200);
  c.strokeText(text, 50, 100);
} else if (radius > 161 && radius < 170){
  textN = 17;
  text = 'stage: ' + textN + '';
}else if (radius > 169 && radius < 171){
  c.fillStyle = 'black';
    c.fillRect(0,0,1000,200);
  text = "stage: " + textN + '';
  c.lineWidth = 4;
  c.strokeText(text, 150, 100);
} else if (radius > 171 && radius < 180){
  textN = 18;
  text = 'stage: ' + textN + '';
}else if (radius > 179 && radius < 181){
  c.fillStyle = 'black';
    c.fillRect(0,0,1000,200);
  text = "stage: " + textN + '';
  c.lineWidth = 4;
  c.strokeText(text, 50, 100);
} else if (radius > 181 && radius < 190){
  color += 4;
  c.fillStyle = 'hsl(' + color + ',100%,50%)';
  textN = 19;
  text = 'stage: ' + textN + ' ALMOST THERE!';
}else if (radius > 191 && radius < 221){
  color += 0.0001;
  c.strokeText(text,50,100);
  c.fillStyle = 'hsl(' + color + ',30%,40%)';
  textN = 19;
  text = 'stage: ' + textN + ' ALMOST THERE!';
}else if (radius > 221 && radius < 223){
  c.fillStyle = 'black';
    c.fillRect(0,0,1000,200);
  text = "stage: " + textN + ' ALMOST THERE!';
  c.lineWidth = 4;
  c.strokeText(text, 50, 100);
} else if (radius > 223 && radius < 225){
  c.strokeStyle = 'black';
  c.lineWidth = 4;
  c.fillStyle = 'hotpink';
  text = 'PROMOTION!';
  c.strokeText(text,50,100);
  textN = 20;

}
else if (radius > 225 && radius < 250){
  c.strokeStyle = 'black';
  c.lineWidth = 4;
  c.fillStyle = 'hotpink';

  textN = 20;
  text = 'FOR YOU!!!!!!!!!!!!! \nspecial price\nPROMOTION!';
  c.font = "italic bold 3em courier";
  c.strokeText(text,50,200);
  c.fillText(text,50,200);
}else if (radius > 250 && radius < 252){
  c.fillStyle = 'black';
    c.fillRect(0,0,1000,250);
  text = "stage: " + textN + ' ALMOST THERE!';
  c.lineWidth = 4;
  c.strokeText(text, 50, 100);
} else if (radius > 252 && radius < 290){
  c.strokeStyle = 'black';
  c.lineWidth = 4;
  c.fillStyle = 'lime';
  c.strokeText(text,50,100);
  textN = 19;
  text = 'stage: ' + textN + ' ALMOST DONE!';
}else if (radius > 290 && radius < 292){
  c.fillStyle = 'black';
    c.fillRect(0,0,1000,200);
  text = "stage: " + textN + ' ALMOST THERE!';
  c.lineWidth = 4;
  c.strokeText(text, 50, 100);
} else if (radius > 292 && radius < 320){
  c.strokeStyle = 'black';
  c.lineWidth = 4;
  c.fillStyle = 'green';
  c.strokeText(text,50,100);
  textN = 19.5;
  c.font = "normal bold 3em sans-serif";
  text = 'stage: ' + textN + ' 80 more radius left';
}else if (radius > 320 && radius < 322){
  c.fillStyle = 'black';
    c.fillRect(0,0,1000,200);

  c.lineWidth = 4;
  c.strokeText(text, 50, 100);
} else if (radius > 322 && radius < 380){
  c.strokeStyle = 'black';
  c.lineWidth = 4;
  c.fillStyle = 'gold';
  c.strokeText(text,50,100);
  textN = 19.9;
  text = 'stage: ' + textN + ' last one';
}else if (radius > 380 && radius < 382){
  c.fillStyle = 'black';
    c.fillRect(0,0,1000,200);

  c.lineWidth = 4;
  c.strokeText(text, 50, 100);
} else if (radius > 391 && radius < 394){
  c.fillStyle = 'black';
  c.fillRect(0,0,1000,100)
  c.strokeStyle = 'black';
  c.lineWidth = 4;

  c.strokeText(text,50,100);
  textN = 20;
  text = 'stage: ' + textN + ' completed';
}else if (radius > 394 && radius < 400){
  c.strokeStyle = 'black';
  c.lineWidth = 4;
  c.fillStyle = 'hsl(220,100%,50%)';
  c.strokeText(text,50,50);
  c.fillText(text, 50, 50);
  textN = 20;
  text = 'stage: ' + textN + ' completed';
};


c.strokeText(text,50,100);
c.fillText(text, 50, 100);

// stop loop if radius is more than 499
  if(radius < 500) {

    requestAnimationFrame(draw);
  }
}
draw();

//Tutorial code goes above here ^^^^^^^^^^^^^^^^^^^^^^^^^^^^
};

//invoke function init once document is fully loaded
window.addEventListener('load',init,false);

}) (); //self invoking function

To get it to work use HTML code

<!DOCTYPE html>
<html>
    <head>
       <meta charset="utf-8">
       <title>webTuning's tutorial</title>
       <link href="Your CSS code goes in here" rel="stylesheet" media="all">
         <script defer src="Your JS code goes in here."></script>
    </head>
    <body>

          <canvas width="1000" height="1000"></canvas>
        <!--  <img src="" alt="logo"> -->

    </body>
  </html>

CSS CODE


body {
  border:0;
  padding:0;
  margin: 0;
}

canvas {
  position:absolute;
  top:0px;
  left:0px;
}

Tutorial link

If you use codepen/easier link

#2

Can you make an for loop for this instead of the if/else if?
Just curios.