HTML элементы и холст

Question

Я пытаюсь воспроизвести этот эффект печати и частицы с этого сайта: https://caferati.me/. Мне удалось создать эффект печати на холсте, но он использует элементы HTML. Я не могу понять, как он былвозможность добавлять элементы HTML на холст, потому что вам нужен холст для частиц.Как бы вы подошли к этому?

Вот что у меня сейчас есть:

let canvas = document.querySelector("canvas");
canvas.width = 500;
canvas.height = 500;
let c = canvas.getContext("2d");
console.log(canvas);

//Typing Effect
let i = 0;
let txt = "Lorem ipsum typing effect!";
let speed = 80;
let cursorX = 20;
let cursorY = 80;
let x = 20;
let y = 80;
function typeWriter() {
  if (i < txt.length) {
    c.fillText(txt.charAt(i), cursorX, cursorY);
    let letterLength = c.measureText(txt.charAt(i)).width;
    cursorX = cursorX + letterLength;
    i++;
    x += 1;
    setTimeout(typeWriter, speed);
  }
}

c.fillStyle = "white";
c.font = "15px Arial";
typeWriter();

Answer 1

Вы не можете поместить html элементы в холст в настоящее время, и на странице, на которую вы указываете, теги span находятся за пределами canvas. Что вы можете сделать, это расположить элементы html поверх холста (или холста под html, как на странице примера) с помощью position:absolute - https://developer.mozilla.org/en-US/docs/Web/CSS/position