javascript - Canvas Restart On Button Click -

i have canvas html element gets displayed when click on button.

the problem having animation in canvas lasts 1 second. when click on button change css property display:none display:inline, animation has ended, loading in background.

what want happen click on button restart canvas animation. dont mind loading in background, want restart on click of button.

this html canvas , button:

    <canvas class="canvas2" id="canvas2"></canvas>     <script src="canvas.js"></script>      <div class="buttons">         <button class="two">canvas 2</button>     </div>   

this javascript canvas. animation bouncing square left right:

var canvas = document.getelementbyid('canvas2'); var c2 = canvas.getcontext('2d');  c2.fillstyle = "black"; c2.fillrect(0,0,canvas.width,canvas.height);  var posx = 20; posy = canvas.height / 2; vx = 8,  vy = -10; gravity = 1;  setinterval(function(){     c2.fillstyle = "black";     c2.fillrect(0,0,canvas.width,canvas.height);     posx += vx;     posy += vy;      if (posy > 120){         vy *= -0.5;         vx *= 0.5;         posy = 120;     }      vy += gravity;      c2.fillstyle = "red";     c2.fillrect(posx, posy, 10, 10); }, 30);  }); 

and simple jquery used show canvas element:

$('.two').click(function() {     $('.canvas2').show(); }); 

i've been trying out various functions cannot seem canvas animation restart when button class two clicked.

can help?

https://jsfiddle.net/co047stc/

var canvas, context;  var canvasdisplayed = false;  var intervalanimation = null;  var posx, posy, vx, vy, gravity;    $('.two').click(function() {    if (!canvasdisplayed) {      showcanvas()    }    animation()  });    function showcanvas () {  	canvasdisplayed = true;  	canvas = document.getelementbyid('canvas2');    context = canvas.getcontext('2d');      context.fillstyle = "black";    context.fillrect(0,0,canvas.width,canvas.height);  }    function resetsquare () {  	posx = 20;    posy = canvas.height / 2;    vx = 8,     vy = -10;    gravity = 1;  }      function animation () {  	resetsquare()  	animationend()    intervalanimation = setinterval(function(){   	 	context.fillstyle = "black";  		context.fillrect(0, 0, canvas.width, canvas.height)      posx += vx;      posy += vy;        if (posy > 120){        vy *= -0.5;        vx *= 0.5;        posy = 120;      }        vy += gravity;        context.fillstyle = "red";      context.fillrect(posx, posy, 10, 10);    }, 30);  }    function animationend () {  	context.fillstyle = "black";  	context.fillrect(0, 0, canvas.width, canvas.height)    clearinterval(intervalanimation)  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <canvas class="canvas2" id="canvas2"></canvas>      <script src="canvas.js"></script>        <div class="buttons">          <button class="two">canvas 2</button>      </div>