c# - canvas animation with .clearRect(x,y,w,h) -

i'm relative beginner in using javascript , canvas. i'll try explain i've done far. have external style sheet, , i've set background of canvas element (it's background image of road trails off horizon). have created first function (drawroad()) draw thin strip of white down center of road, , have trail off horizon road. have created function (roadlines()) inserts spaces in white strip. i'm happy how looks here far.

what want run through cycle of... drawroad(), roadlines(), clear canvas, drawroad() again, , change position of roadlines() , call function again. want move position of roadlines() downwards vertically, gives effect of travelling down road. (i hope makes sense?) going right way? or there easier way i'm overlooking?

any suggestions appreciated. below i've done far. also, function animate() @ bottom, call drawroad() , call roadlines().

window.requestanimframe = (function (callback) { return window.requestanimationframe || window.webkitrequestanimationframe || window.mozrequestanimationframe || window.orequestanimationframe || window.msrequestanimationframe || function (callback) {     window.settimeout(callback, 1); };})();  // set function draws in canvas function drawroad() {     var mycanvas = document.getelementbyid("mycanvas");     var ctx = mycanvas.getcontext("2d");     ctx.clearrect(0, 0, mycanvas.width, mycanvas.height);     ctx.beginpath();     ctx.moveto(471, 199);     ctx.lineto(467, 600);     ctx.lineto(475, 600);     ctx.closepath();     ctx.fillstyle = "rgb(255, 255, 255)";     ctx.fill();     ctx.linewidth = 1;     ctx.strokestyle = "rgb(255, 255, 255)"; }  //set variables , function/for loop creates spacing/intervals road markings , movement function roadlines() { var interval = 1; var space = 1; var mycanvas = document.getelementbyid("mycanvas"); var ctx = mycanvas.getcontext("2d"); (var roadline = 199; roadline < 600; roadline = roadline + interval) {     interval = (interval * 1.1);     space = (space * 1.05);     ctx.clearrect(450, roadline, 40, space);     } }  function animate() {     drawroad();     roadlines(); } 

the first thing need have animation loop doing loop. call 2 functions once , quits, first adjustment can be:

function animate() {     drawroad();     roadlines();      requestanimationframe(animate); /// enable loop } 

(ps: make sure rename poly-fill requestanimframe requestanimationframe, see demo link below).

we of course need start animation loop somewhere call global scope:

animate(); 

the next thing need make sure lines moving can see them animate.

simply providing offset code won't work straight out of box have scaling in not bound screen geometry.

this either make lines "jumpy" when try loop them resetting offset or, lines grow in size longer loop runs if choose not reset offset.

so have reconsider how draw lines or make compromise.

for compromise need find "sweet spot" value reset offset loop. slower line moves more visible small "jump" be.

in order make line appear smooth however, need implement simple 3d projection (or 2.5d pseudo 3d similar have bound display).

here online demo lines animated using offset. added slider @ bottom can find sweet-spot offset limit. experiment see how works. did not implement 3d projection of line used have have feeling based on post understanding basic here first steps.