Canvas - bezier repeat

Question

I'm a french programmer, so excuse my English :

I make a canvas with a wave and i can't find where i must clear my canvas for good visual effect, it's my code :

window.onload = function()
{
    var canvas  = document.getElementById('canvas'),
  context = canvas.getContext('2d');









if (canvas.getContext)

        // If you have it, create a canvas user inteface element.
        {


          // Paint it black.
          context.fillStyle = "black";
          context.rect(0, 0, 1000, 1000); 
          context.fill();

          // Paint the starfield.


          vague();
          stars();
          decor();
         }

function stars() {

        // Draw 50 stars.
        for (i = 0; i <= 70; i++) {
          // Get random positions for stars.
          var x = Math.floor(Math.random() * 800)
          var y = Math.floor(Math.random() * 400)

          // Make the stars white
          context.fillStyle = "white";
          context.shadowColor = 'white';
          context.shadowBlur = 50;

          // Give the ship some room.
          if (x < 0 || y < 0) context.fillStyle = "black";

          // Draw an individual star.
          context.beginPath();
          context.arc(x, y, 3, 0, Math.PI * 2, true);
          context.closePath();
          context.fill();

        }
      }

function decor() {



                context.beginPath();
                context.shadowColor = 'white';
        context.shadowBlur = 30;
        context.fillStyle = 'skyblue';
        context.fillRect(0,400,1000,200);
        context.closePath();
        context.fill(); 


        context.beginPath();
        context.fillStyle = 'white';
        context.shadowColor = 'white';
        context.shadowBlur = 1500;
        context.shadowOffsetX = -300;
        context.shadowOffsetY = 400;
        context.arc(680,110,100,Math.PI*2,false);
        context.closePath();
        context.fill(); 

}


function vague (){

    draw(-120,50);
    var i = 0;

    function draw(x,y){



          for ( var i = 0; i <= 20; i++) {


            var x = x+50;
            var y = y;



            context.fillStyle = 'rgba(0,0,100,0.4)';
            context.beginPath();
            context.moveTo(72+x, 356+y);   // Tracer autre une ligne (théorique)
            context.strokeStyle = 'skyblue';
            context.lineWidth=3;
            context.bezierCurveTo(60+x, 360+y , 92+x , 332+y , 104+x , 323+y );
            context.bezierCurveTo(114+x, 316+y , 128+x , 304+y , 140+x , 325+y );
            context.bezierCurveTo(148+x, 339+y  , 127+x, 307+y , 115+x , 337+y );
            context.bezierCurveTo(109+x, 352+y , 159+x , 357+y , 144+x , 357+y );
            context.bezierCurveTo(129+x, 357+y , 87+x , 356+y , 72+x , 356+y );
            context.fill();
            context.stroke(); 


                if (x>=800){
                   x=-120;

                }

          }

        setInterval( function () { draw(x,y) }, 50);
        x = x+20;



  }

}
};

Thanks for your answer i can't find my mistake, i become CRAZY !

Answer 1

My recommendation would be to put your waves on a different canvas with a transparent background that is on top of your background canvas. Then you just clear the canvas (or the area where the waves are rendered) at the start of each draw call. That way, you don't need to rerender whatever background as well.

In order to do that, you would use CSS to place the canvases on top of each other. You would also just give the other canvas a different id, like <canvas id="vagueCanvas"></canvas> and select the context the same way var vagueContext = document.getElementById( 'vagueCanvas' ).getContext( '2d' );.