Как добавить внутри canvas буквы?

let c = canvas.getContext('2d'), w = canvas.width, h = canvas.height   
 
requestAnimationFrame(draw) 
 
function draw(t) {  
  let i = c.getImageData(0, 0, w, h) 
  // цикл по всем пикселям 
  for(var x = 0; x < w; x++) { 
  for(var y = 0; y < h; y++) { 
      let v = px(x, y, t) 
      let o = (y*w + x)*4     
      i.data[o++] = v[0]*255 
      i.data[o++] = v[1]*255 
      i.data[o++] = v[2]*255 
      i.data[o++] = v[3]*255 
  }} 
  c.putImageData(i, 0, 0) 
  requestAnimationFrame(draw) 
} 
 
// функция дистанции до скругленного прямоугольника 
// https://www.iquilezles.org/www/articles/distfunctions/distfunctions.htm 
function sdRoundBox(x, y, sx, sy, r) { 
  x = Math.abs(x) - sx; 
  y = Math.abs(y) - sy; 
  sx = Math.max(x, 0);  
  sy = Math.max(y, 0); 
  return Math.min(Math.max(x, y), 0) + Math.sqrt(sx*sx + sy*sy) - r; 
} 
 
// функция которая определяет цвет пикселя 
function px(x, y, t) { 
  // определим минимальное расстояние от текущего пикселя до нашей фигуры 
  let d = Math.abs(sdRoundBox(2*x-w, 2*y-h, 150, 40, 15)); 
  if (d>16) return [0, 0, 0, 0] 
  // и используем это расстояние и координату пикселя по х для определения цвета пикселя 
  let c = Math.min(d/32 + 0.3 + Math.sin(t/1000)*0.1, d/8); 
  return [0.4+(x/w+1-y/h)*0.3, c, 1, 1-c]; 
}

<canvas width="200" height="100" id="canvas" data-word="Буквы"/>