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.