preserve phase when using WebAudio’s AnalyserNode

Question

I'm trying to draw an oscilloscope style visualization using getByteTimeDomainData featured in this guide : https://developer.mozilla.org/en-US/docs/Web/API/AnalyserNode/getByteTimeDomainData

I would like to preserve the phase of the wave from one frame to another (otherwise the wave "shifts" progressively from one side of the canvas to the other).

I'm basically altering the code like that:

    let last = analyser.context.currentTime;
    const waveArrayDuration = analyser.fftSize / analyser.context.sampleRate;
    const waveArrayStepDuration = 1 / analyser.context.sampleRate;
   
    function draw() {
        // [...]

        const now = analyser.context.currentTime;
        analyser.getByteTimeDomainData(dataOscilloscopeArray);
        let elapsed = now - last;
        last = now;

        const shift = Math.round((waveArrayDuration - (elapsed % waveArrayDuration)) / waveArrayStepDuration);

        for (let x = 0; i < bufferLength; i++) {
            const i = (shift + x) % bufferLength;
            const v = dataArray[i] / 128.0;
            const y = (v * HEIGHT) / 2;

the gist of it being this line:

const shift = Math.round((waveArrayDuration - (elapsed % waveArrayDuration)) / waveArrayStepDuration);

which I determined using the following assumptions:

1. each item in the array is spaced from the next one by the sample rate (1 / sampleRate)
2. the whole array is this duration times the fftSize
3. shift is trying to be the start of the array so that the phase does not vary from one frame to another

Here's how it looks like:

Obviously this is not right. I figured out a hackish way to guess the phase which looks better (code for this is irrelevant to the question ; but result is similar to what I'm trying to achieve):

But I'd rather determine the start of the array using timings instead. Are my assumptions about getByteTimeDomainData correct? Is there a standard way to achieve this (basically what an analog oscilloscope does I assume).