Bounce a circle inside HTML5 canvas infinitely

Post Views: 15

In this post, we are going to see how to bounce a circle inside HTML5 canvas infinitely.

Here we are going to draw an arc inside the canvas and then move it inside it infinitely using JavaScript code. So let’s start.

At first, lets, create the canvas element in HTML:

<canvas></canvas>

Now give it border with CSS:

canvas {border: solid 1px #000;}

After that take the canvas element inside JavaScriopt variable:

var canvas = document.querySelector('canvas');

Then set the canvas height and width in JavaScript:

canvas.width = 600;
canvas.height = 400;

Now, set the drawing context on the canvas to 2d:

var c = canvas.getContext('2d');

After that, the rest of the code is given below:

var rad = 16;
var x = Math.random()*(600-rad*2)+rad;
var y = Math.random()*(400-rad*2)+rad;
var dx = 2;
var dy = 2;
function animate()
{
requestAnimationFrame(animate);

c.clearRect(0,0,600,400);
c.beginPath();
c.arc(x, y, rad, 0, Math.PI*2);
c.strokeStyle = "red";
c.stroke();

if (x > 600 - rad || x < 0+rad) {
dx = -dx;
}

if (y > 400 - rad || y < 0+rad) {
dy = -dy;
}

x += dx;
y += dy;

}
animate();

In the above code, we have set the radius and random position of our arc/circle in the canvas. This is because we want to set the starting position randomly every time someone accesses our page.

You can notice that we have excluded the twice of radius of the circle from random x and y-axis. this is because the center of the circle will be taken in the calculation:

After that, you can see that we have created a function with the name animate and inside this function, we have called the same function and it is called again and again.

Now below is the step by step description on the code that we have used in the animate function:

function animate()
{
  // Our code goes here
}

Inside the function, we call the function itself in JavaScript requestAnimationFrame method to perform an animation and requests that the browser calls a specified function to update an animation before the next repaint:

requestAnimationFrame(animate);

After that, we clear the previously specified pixels within a given rectangle so that we will not see all the previous circle. In our canvas, we are actually creating a new circle every time and remove all the previously drawn circles or arc. Below is the JavaScript clearRect method we have used:

c.clearRect(0,0,600,400);

Also, read:

In the above code, you can see that we have clear the entire canvas by setting the width and height of the canvas.

Now below is the code that will draw the arc or circle:

c.beginPath();
c.arc(x, y, rad, 0, Math.PI*2);
c.strokeStyle = "red";
c.stroke();

After that, we increase/decrease the x and y position:

if (x > 600 - rad || x < 0+rad) {
dx = -dx;
}

if (y > 400 - rad || y < 0+rad) {
dy = -dy;
}

x += dx;
y += dy;

In the above code, we have added two if else condition. Depending upon the condition, we increase or decrease the x and y position of our arc to prevent it from going outside the canvas and give it bounce effect.

The complete code to bounce a circle inside HTML5 canvas infinitely

If you want the complete code of bouncing a circle inside the canvas the below is the complete code:

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <style type="text/css">
    canvas {border: solid 1px #000;}
  </style>
</head>
<body>

<canvas></canvas>

<script type="text/javascript">
  var canvas = document.querySelector('canvas');

  canvas.width = 600;
  canvas.height = 400;


  var c = canvas.getContext('2d');

   var rad = 16;
   var x = Math.random()*(600-rad*2)+rad;
   var y = Math.random()*(400-rad*2)+rad;
   var dx = 2;
   var dy = 2;
   function animate()
   {
     requestAnimationFrame(animate);

     c.clearRect(0,0,600,400);
     c.beginPath();
     c.arc(x, y, rad, 0, Math.PI*2);
     c.strokeStyle = "red";
     c.stroke();

     if (x > 600 - rad || x < 0+rad) {
      dx = -dx;
     }

     if (y > 400 - rad || y < 0+rad) {
      dy = -dy;
     }

      x += dx;
      y += dy;
     
   }
   animate();


</script>

</body>
</html>

Save the above code in an HTML file and open it on your browser. You can see the nice bounce effect of a circle inside the canvas. You will see every time it reach to the edge of the canvas container, it bounces back.

Bounce a circle inside HTML5 canvas infinitely

The complete code to bounce a circle inside HTML5 canvas infinitely

Leave a Reply Cancel reply