Отображение i счетчик в canvas

var context; // переменная для хранения контекста
var container; // переменная для хранения canvas элемента
var currentAngle = 0; // текущее значение угла
var radius = 100; // радиус окружности
var baseX = 200; // x координата центра окружности
var baseY = 200; // y координата центра окружности
var i = 0;
window.onload = function() {
  container = document.getElementById("code"); // создаем canvas элемент 
  container.width = 400; // устанваливаем ширину
  container.height = 400; // устанавливаем высоту
 
  document.body.appendChild(container); // добавляем canvas в DOM
 
  context = container.getContext('2d'); // получаем конткест
  context.fillStyle = '#111111'; // устанавливаем цвет заливки в черный
  context.fillRect(0, 0, container.width, container.height); // собственно заливаем все черным
 
 var interval = setInterval(function() {
    // считаем косинус текущего значения угла
    // и умножаем на значение радиуса
    var vx = Math.cos(currentAngle) * radius;
 
    // считаем синус текущего значения угла
    // и умножаем на значение радиуса
    var vy = Math.sin(currentAngle) * radius;
 
    context.fillStyle = '#FF8228'; // устанавливаем цвет заливки в #FF8228
 
    context.fillRect(baseX + vx, baseY + vy, 2, 2);
 
    // считем новую позицию по x и y относительно центра окружности
    // и заливаем ее квадратиком высотой и шириной в 5 пикселей
    // увеличиваем значение угла
    currentAngle += 0.01;
    i++;
    if (i == 627)
    {
        clearInterval(interval); // Остановка интервала
    }
  }, 5)
}

while(true){
action i;
if (i == 627)break;
i++;
 
 
}

var radius = 100,
  baseX = 200,
  baseY = 200,
  currentAngle = 0,
  i = 0,
  context, container;
 
window.onload = function() {
  container = document.getElementById("code");
  container.width = 400;
  container.height = 400;
 
  // document.body.appendChild(container); // добавляем canvas в DOM
 
  context = container.getContext('2d');
  context.fillStyle = '#111111';
  context.fillRect(0, 0, container.width, container.height);
 
  // настроить шрифт и выравнивание текста
  context.font = '48px sans-serif';
  context.textAlign = 'center';
  context.textBaseline = 'middle';
 
  var interval = setInterval(function() {
    var vx = Math.cos(currentAngle) * radius,
      vy = Math.sin(currentAngle) * radius;
 
    // закрасить старый текст
    context.fillStyle = '#111111';
    context.fillRect(150, 170, 100, 60);
 
    context.fillStyle = '#FF8228';
    context.fillRect(baseX + vx, baseY + vy, 2, 2);
 
    // вывести значение переменной `i`
    context.fillText(i, 200, 200);
 
    currentAngle += 0.01;
    i++;
    if (i == 627) {
      clearInterval(interval);
    }
  }, 5)
}