Luka Kerr Luka Kerr - 3 months ago 15
jQuery Question

Canvas Restart On Button Click

I have a canvas html element that gets displayed when I click on a button.

The problem I am having is that the animation in the canvas only lasts about 1 second. So when I click on the button to change its CSS property from

display:none
to
display:inline
, the animation has already ended, as it was loading in the background.

What I want to happen is for the click on the button to simply restart the canvas animation. I dont mind that it is loading in the background, I just want it to restart on click of the button.

This is the html for the canvas and button:

<canvas class="canvas2" id="canvas2"></canvas>
<script src="canvas.js"></script>

<div class="buttons">
<button class="two">Canvas 2</button>
</div>


This is my javascript for the canvas. The animation is simply a bouncing square from left to 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 this is the simple jQuery used to show the canvas element:

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


I've been trying out various functions but I cannot seem to get the canvas animation to restart when the button with class
two
is clicked.

Can anyone help?

Answer

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>