Tasaisesti vierivä käppyrä

Jos sulla on palikka, joka tekee piirtämisen ja ottaa datan vaikka generaattorina tai voihan se listaksikin spreadata, mutta sen uuden datan tulemisen ja entisen unohtamisen oikeassa järjestyksessä voisi hoitaa näin:

var a = {
i: 0,
elems: [1,2,3,4,5,6],
getAll: function* getAll() {
const n = this.elems.length;
for (let j=0; j<n; j ) {
yield this.elems[(this.i j)%n];
}
},
push: function(x) {
this.elems[this.i] = x;
this.i = (this.i 1)%this.elems.length;
}
}

//testi:
console.log([...a.getAll()]);
for(let i=7; i<20; i ) {
a.push(i)
console.log([...a.getAll()]);
}

Käppyrää pitäisi saada piirretyksi vähän "pidemmälle" mitä sitä näkyy, jotta saisi vieritettyä aina viimeiseen pisteeseen.

Kannattaisikohan käyttä kahta canvasta, eli kun toista vieritetään, niin toiseen piirretään sillä aikaa seuraava versio, joka sitten vaihdetaan edellisen käyrän loppuessa?

Idea vähän tuo https://jsfiddle.net/ax7n8944/ tyylinen, paitsi että vieritys tietysti automaattisesti eikä hiirellä, eikä canvaksen tartte olla kuin vähän suurempi, jotta sinne mahtuu se käyrän uusi osa. Ja tuollaisia canvaksia sitten pari, joita vaihdeltaisiin vuoron perään näkyviin.