javascript - why my animation with html5 canvas is so flickery? -

i want keep animation is, problem flickering of animation.

if reason question needs more elaborate on, please let me , explain in more details.

var text = 'got it';      document.getelementbyid('mycanvas').style.backgroundcolor = 'lightgray';      var ctx = document.getelementbyid('mycanvas');      var c = ctx.getcontext('2d');        function ball(x, y, zx, zy, rotation,goldx,goldy) {      this.x = x;      this.y = y;        this.zx = zx;      this.zy = zy;      this.rotation = rotation;      this.goldx = goldx;      this.goldy = goldy;      this.draw = function() {          c.beginpath();      c.settransform(1, 0, 0, 1, 0, 0);         c.translate(0, 0.01);          c.rotate(this.rotation);      c.fillstyle = 'black';          c.font="10px corsive";      c.filltext("$100", this.x, this.y + 10);      c.strokestyle = "gray"        c.rect(this.x, this.y, 24,14);      c.fillstyle = 'rgba(0, 128, 0, 0.49)';      c.fill();      c.stroke();      c.closepath();        }        var x = math.floor(math.random() *10);      this.draw1 = function() {      c.beginpath();      c.arc(this.goldx, this.goldy, 5, math.pi*2,false);        c.fillstyle = 'gold';      c.fill();      c.stroke();      }        this.update = function() {      var b = math.random() * 500;      if(this.y  > 510 || this.x > 510 || this.x  < -30) {ballarray.splice(i,1)}        this.x += this.zx;      this.y += this.zy;            if(ballarray.length < 99) {ballarray.push(new ball(this.x,20,this.zx,this.zy, this.rotation))}        if(x > 350) { this.rotation += 0.00009} else {this.rotation -= 0.00009};      this.draw();        if(this.goldy  > 510 || this.goldx > 510 || this.goldx  < 0) {goldarray.splice(j,1)}      if(goldarray.length < 49) {goldarray.push(new ball(0,0,0,0,0,goldx,goldy))}      this.goldy += 1;               this.draw1();       }             }      var goldarray = [];        (j = 0; j < 50; j++){      var goldx = math.random() * 500;      var goldy = math.random() * 500;      goldarray.push(new ball(0,0,0,0,0,goldx,goldy));      }      var ballarray = [];        for(i= 0; < 100; i++) {      var x = math.random() * 500;      var y = math.random() * 500;      var zx = math.random() - 0.5;      var zy = 1;      var rotation = 0;      ballarray.push(new ball(y,x,zx,zy,rotation,goldx,goldy));      }        function animate() {      requestanimationframe(animate);      c.clearrect(0,0,500, 500);       for(j = 0; j< goldarray.length; j++) {       goldarray[j].update();       }      for(i = 0; < ballarray.length; i++) {      ballarray[i].update();         }        }        animate();

<canvas id="mycanvas" width="500" height="500" style="border: 1px solid black"></canvas>

array splice causing skip objects

your animation flicking because of lot of reasons.

the main 1 being way delete ball , or gold. call update function within loop.

for(i = 0; < balls.length; i++){     balls[i].update(); } 

then in update function test if ball out of bounds. if remove array

if(this.y > 510) { //  example not code      balls.splice(i,1); } 

but ignore fact have moved balls above 1 in array down 1 index. when update function returns ball @ i has been removed , next 1 above @ i. loop increments i , draw next ball, skipping ball.

the skipped ball not rendered frame , flicker. same gold.

quick fix

there other problems (many) , give fix require complete rewrite.

what can reset ball , gold rather delete , create another.

where have

if(this.y  > 510 || this.x > 510 || this.x  < -30) { ballarray.splice(i,1) } 

change to

if(this.y  > 510 || this.x > 510 || this.x  < -30) {      this.x = math.random() * 500;      this.y = math.random() * 500;      this.zx = math.random() - 0.5;      this.zy = 1;      this.rotation = 0;          } 

and remove line

if(ballarray.length < 99) {ballarray.push(new ball(this.x,20,this.zx,this.zy, this.rotation))} 

do same gold.

that ready next problem.

some code notes.

you still have problems because have gold , ball 1 object rendering both ball , gold each ball , same each gold.

you need ball , gold separate objects, gold not draw ball , other way around.

you should have

 function gold(){       this.draw(){ // draw code      this.update() { // update code      ...  }  function ball(){ /* code */      this.draw(){ // draw code      this.update() { // update code      ...  } 

and create each

 ballarray.push(new ball( stuff));  goldarray.push(new gold( stuff)); 

also have need declare variables have not done i,j end in global scope , come bug soon.

whenever use variable must have @ location inside function declaration.

eg

 function animate(){      var i;      var j;      ... rest of code. 

oh , more...

but leave there now.