Как создать линейную линейку времени для простой галки с помощью tone.js

Question

Я пытаюсь создать простую веб-галку. Я создал временную линейку для этого. Но график не синхронизирован с Tone.Master.

Я использовал 3000 пикселей для общей ширины для моей галочки и добавил интервал в 24 пикселя, чтобы я мог создать линейку для моей временной шкалы. Кроме того, треки можно перетаскивать с помощью jquery UI, а размер сетки, который я использовал, равен [12, 0].

createBitRular() {
    const canvas = document.getElementById("toprular");
    const bitrular = canvas.getContext("2d");

    bitrular.beginPath();
    bitrular.font = "10px Arial";
    let counter = 1;

    for (var i = 0; i < canvas.width; i += 24) {
        var y = (i / 192 === parseInt(i / 192)) ? 0 : 10;
        if(i / 192 === parseInt(i / 192)) {
            bitrular.fillText(counter,i+12, 8);
            counter++;
        }

        bitrular.moveTo(i + 10, y);
        bitrular.lineTo(i + 10, 15);
        // if (counter === 9) {
        //     counter = 1
        // }
    }
    bitrular.lineWidth = .50;
    bitrular.strokeStyle = '#b4b4b4';
    bitrular.stroke();

}

Есть ли способ синхронизировать мою временную шкалу с Tone.Master, чтобы я мог создать идеальную линейную линейку временной шкалы для своего проекта? Не бери в голову, я новичок в Tone.js