CODEWITHSUNDEEP
javascripthtmlcanvas
Qwisatz
Qwisatz

Reputation: 77

JS Canvas: How to make rectangle go back and forth once it reaches the boundary

So I have this rectangle that animates across to the right. How can I get the rectangle to reverse it when it hits the boundaries. I'm trying to make it go back and forth.

<!DOCTYPE html>
<html>
<head>
<script type='text/javascript'>
window.onload=function(){
    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');
    var x = 0;
    var y = 50;
    var width = 10;
    var height = 10;
    function animate() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.fillRect(x, y, width, height);
        x++;
        if(x <= 490) {
            setTimeout(animate, 33);
        }
    }
    animate();
}
</script>
</head>
<body>
  <canvas id="canvas" width="500" height="400"
    style="border: 1px solid #000000;"></canvas>
</body>
</html>

Upvotes: 1

Views: 1350

Answers (2)

Katia Punter
Katia Punter

Reputation: 302

https://codepen.io/forTheLoveOfCode/pen/wqdpeg

Is that what you need? (link to codepen above).

var canvas = document.getElementById("canvas_id");
var context = canvas.getContext('2d');
var x=5;
var y=5;
var velocity = 10;
   
function move(){
   canvas.width = window.innerWidth;
   canvas.height = window.innerHeight;
   x =x + velocity
   if ((x+50)>canvas.width || x<0){
    	velocity *=-1;
   }
   draw()
}

function draw(){
   context.fillStyle = "#E80C7A";
   context.strokeStyle = "#000000";
   context.lineWidth = '3';
   context.fillRect(x, y, 50, 100);
   context.strokeRect(x, y, 50, 100);
}
setInterval(move, 100);
<html>
  <body>
    <canvas id = "canvas_id">
    </canvas>
  </body>
</html>

Upvotes: 1

FrontTheMachine
FrontTheMachine

Reputation: 526

here's a solution with boundaries detection

window.onload=function(){
    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');
    var x = 0;
    var y = 50;
    var width = 10;
    var height = 10;
    var speed = 10; // speed
    function animate() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.fillRect(x, y, width, height);
        if(
          (x >= 500 - width && speed > 0) || // going to the right and bound reached
          (x <= 0 && speed < 0) // going to the left and bound reached
          ) {
            speed *= -1; // inverting the direction
        }
        x += speed;
        setTimeout(animate, 33);
    }
    animate();
}
<canvas id="canvas" width="500" height="400"
    style="border: 1px solid #000000;"></canvas>

consider using requestAnimationFrame instead of setTimeout to do this kind of work.

Upvotes: 1

Related Questions