Javascript 在计数器顶部添加文本

我想在计数器开始工作之前向计数器添加文本。我可以使用当前代码添加它吗？在这段代码中，一切都由JavaScript控制。我无法自定义：（

任何帮助都将不胜感激

HTML:

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

JS:

let canvas=document.getElementById（'canvas'），
度=0，
countD=['3'，'2'，'1'，'Go！']，
计数=0；
canvas.height=344；
画布宽度=344；
设c=canvas.getContext（'2d'）；
设度弧度=函数（度）{
返回（度*22）/（180*7）；
}
让动画=函数（）{
如果（count
let canvas=document.getElementById（'canvas'），
度=0，
countD=['3'，'2'，'1'，'Go！']，
计数=0；
canvas.height=344；
画布宽度=344；
设c=canvas.getContext（'2d'）；
设度弧度=函数（度）{
返回（度*22）/（180*7）；
}
让动画=函数（）{
如果（count）你能分享你的html代码吗？嗨，Punitha Subramani Yoganyaa S，html就是这个任何解决方案吗？代码对我来说都是破绽的。如果可以，请用小提琴添加它。不，实际上，我们需要添加文本（例如：虚拟文本）就在计数器出现之前。文本应该显示，然后必须淡出，然后只有计数器显示并开始工作。是的，它正在工作。实际上，它应该在计数器开始工作之前出现并消失。
let canvas = document.getElementById('canvas'),
    degree = 0,
    countD = ['3', '2', '1', "Go!"],
    count = 0;

canvas.height = 344;
canvas.width = 344;

let c = canvas.getContext('2d');
let degreeToRadian = function(degree){
  return (degree*22)/(180*7);
}

let animate = function(){
  if(count<3){
    requestAnimationFrame(animate);
  }
  c.clearRect(0, 0, canvas.width, canvas.height);
  c.beginPath();
  /* border alignment*/
  c.arc(170, 170, 150, degreeToRadian(-90), degreeToRadian(degree));
  c.shadowBlur = 15;
  c.shadowColor = "red";
  c.strokeStyle="white";
  c.lineWidth = 10;
  c.stroke();


  c.beginPath();
  /* Text alignment */
  c.strokeText(countD[count], 170, 215);
  c.lineWidth = 0;
  c.font = "120px NeonTubes2Regular";
  c.textAlign = "center";
  c.stroke();

  degree+=4;
  if(degree === 360){
    degree = 0;
    count++;
  }
} animate();

let canvas = document.getElementById('canvas'),
    degree = 0,
    countD = ['3', '2', '1', "Go!"],
    count = 0;

canvas.height = 344;
canvas.width = 344;

let c = canvas.getContext('2d');
let degreeToRadian = function(degree){
  return (degree*22)/(180*7);
}

let animate = function(){
  if(count<3){
    requestAnimationFrame(animate);
  }
  c.clearRect(0, 0, canvas.width, canvas.height);
  c.beginPath();
  /* border alignment*/
  c.arc(170, 170, 150, degreeToRadian(-90), degreeToRadian(degree));
  c.shadowBlur = 15;
  c.shadowColor = "red";
  c.strokeStyle="white";
  c.lineWidth = 10;
  c.stroke();


  c.beginPath();
  /* Text alignment */
  c.strokeText(countD[count], 170, 215);
  c.lineWidth = 0;
  c.font = "120px NeonTubes2Regular";
  c.textAlign = "center";
  c.fillText("test data....",10,50);
  c.stroke();

  degree+=4;
  if(degree === 360){
    degree = 0;
    count++;
  }
}
  animate();