CODEWITHSUNDEEP
javascripthtmlhtml5-canvas
glittergirl
glittergirl

Reputation: 523

How to create resizable html5 canvas for javascript bouncing ball?

I am trying to create a rotating bouncing ball using javascript inside an html5 canvas. I want the canvas to fit the browser window width and height, while being resizable

From researching a solution I have landed on two seperate sections of javascript code but I am not familiar enough with javascript to merge them in a way to make this work

<canvas id="myCanvas">
    <h1>Bouncing Ball</h1>
</canvas>

<script>
  window.onload = function() {

    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");
    var x = canvas.width / 2;
    var y = canvas.height / 2;
    // SPEED
    var dx = 2;
    var dy = -2;

    draw();

    function draw() {

      ctx.clearRect(0, 0, canvas.width, canvas.height);
      ctx.beginPath();

      ctx.arc(x, y, 100, 0, Math.PI * 2);
      ctx.fillStyle = "#9370DB";
      ctx.fill();
      ctx.closePath();

      if (x + dx > 480) {
        dx = -dx;
      }

      if (x + dx < 0) {
        dx = -dx;
      }

      if (y + dy > 680) {
        dy = -dy;
      }

      if (y + dy < 0) {
        dy = -dy;
      }

      x += dx;
      y += dy;
    }

    setInterval(draw, 10);
  }
</script>

<script>
  (function() {
    var canvas = document.getElementById("myCanvas"),
      context = canvas.getContext("2d");

    // resize the canvas to fill browser window dynamically
    window.addEventListener('resize', resizeCanvas, false);

    function resizeCanvas() {
      canvas.width = window.innerWidth;
      canvas.height = window.innerHeight;

      drawStuff();
    }
    resizeCanvas();

    function drawStuff() {
      // do your drawing stuff here
    }
  })();
</script>

Upvotes: 1

Views: 341

Answers (2)

obscure
obscure

Reputation: 12891

Inside the draw() function you're checking if the balls position exceeds the bounds of the canvas.

if (x + dx > 480) {

and

if (y + dy > 680) {

Since you want the ball to stay in bounds even if the dimensions of the window have changed we need to get the actual size of the canvas. Right at the beginning you defined a variable which holds a reference to the canvas.

var canvas = document.getElementById("myCanvas");

Using this we can get the actual size by calling canvas.width & canvas.height.

So the above two if statements become:

if (x + dx > canvas.width) {
if (y + dy > canvas.height) {

Now if the user resizes the window, the following function will be called:

function resizeCanvas() {
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
}

As you can see, we're updating the width & height properties of the canvas with the size of the window.

The rest is just combining your two snippets into one - which is not a big deal. Here's a working example:

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var x = canvas.width / 2;
var y = canvas.height / 2;
// SPEED
var dx = 2;
var dy = -2;

var radius = 100;

function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.beginPath();

  ctx.arc(x, y, radius, 0, Math.PI * 2);
  ctx.fillStyle = "#9370DB";
  ctx.fill();
  ctx.closePath();

  if (x + dx > canvas.width - radius) {
    dx = -dx;
  }

  if (x + dx < radius) {
    dx = -dx;
  }

  if (y + dy > canvas.height - radius) {
    dy = -dy;
  }

  if (y + dy < radius) {
    dy = -dy;
  }

  x += dx;
  y += dy;
}

// resize the canvas to fill browser window dynamically
window.addEventListener('resize', resizeCanvas, false);

function resizeCanvas() {
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
}

resizeCanvas();

x = canvas.width / 2;
y = canvas.height / 2;

setInterval(draw, 10);
<canvas id="myCanvas">
    <h1>Bouncing Ball</h1>
</canvas>

Upvotes: 2

57_Pixels
57_Pixels

Reputation: 5

I think that you should change the "bouncing" statement, I would be using radius instead of dx and dy. Like, if x + radius of the circle is greater than width then reverse the direction, in this case your radius is 100 so:

<canvas id="myCanvas">
    <h1>Bouncing Ball</h1>
</canvas>

<script>
  window.onload = function() {

    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");
    var x = canvas.width / 2;
    var y = canvas.height / 2;
    // SPEED
    var dx = 2;
    var dy = -2;

    draw();

    function draw() {

      ctx.clearRect(0, 0, canvas.width, canvas.height);
      ctx.beginPath();

      ctx.arc(x, y, 100, 0, Math.PI * 2);
      ctx.fillStyle = "#9370DB";
      ctx.fill();
      ctx.closePath();

      if (x + 100 > canvas.width) {
        dx = -dx;
      }

      if (x - 100 < 0) {
        dx = +dx;
      }

      if (y + 100 > canvas.height) {
        dy = -dy;
      }

      if (y - 100 < 0) {
        dy = +dy;
      }

      x += dx;
      y += dy;
    }

    setInterval(draw, 10);
  }
</script>

<script>
  (function() {
    var canvas = document.getElementById("myCanvas"),
      context = canvas.getContext("2d");

    // resize the canvas to fill browser window dynamically
    window.addEventListener('resize', resizeCanvas, false);

    function resizeCanvas() {
      canvas.width = window.innerWidth;
      canvas.height = window.innerHeight;

      drawStuff();
    }
    resizeCanvas();

    function drawStuff() {
      // do your drawing stuff here
    }
  })();
</script>

Upvotes: 0

Related Questions