How do I make a loop with a timer in canvas in javascript?

Question

This is the part of my code where I need it, but I don't know how to make it infinite times, how do I add the loop? I need to have a rectangle, and when I load the page it should appear in a random position in the canvas, and every 5 seconds a new rectangle should appear in a new position, the rectangles are always the same size

function rectangle(x,y){
    var ctx
    ctx.beginPath();
    ctx.rect(20, 20, 15, 10);
    ctx.stroke();
    }
 function randomMove(){
    var myVar;
    var x;
    var y;
    x = Math.floor(Math.random() * 10) + 1;
    y = Math.floor(Math.random() * 10) + 1;
    myVar = setInterval( ()=> {rectangle(x,y)}, 5000); // pass the rectangle function
    }

Generate the random numbers inside the interval, not outside, else they'll always be the same x and y — CertainPerformance
– CertainPerformance, Commented Apr 9, 2021 at 6:08

Anastazy · Accepted Answer · 2021-04-09 06:43:11Z

1

Working example:

var canvas = document.querySelector('canvas');
canvas.width = 300;
canvas.height = 150;
var ctx = canvas.getContext('2d');

setInterval(drawRect, 500, ctx);

function drawRect(ctx) {
  var x = Math.floor(Math.random() * ctx.canvas.width) + 1;
  var y = Math.floor(Math.random() * ctx.canvas.height) + 1;
  ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
  ctx.fillStyle = '#ff0000';
  ctx.fillRect(x, y, 15, 10);
}

<canvas></canvas>

answered Apr 9, 2021 at 6:43

Anastazy

4,7962 gold badges16 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

ale917k · Accepted Answer · 2021-04-09 06:37:32Z

0

What you need is to call your randomMove function recursively; This way, you will generate that infinite loop which will render new rectangles each 5 seconds:

function randomMove() {
  const x = Math.floor(Math.random() * 10) + 1;
  const y = Math.floor(Math.random() * 10) + 1;

  rectangle(x,y); // Define rectangle

  setTimeout(() => {
    randomMove() // Wait 5s before iterating recursively
  }, 5000)
}

Also, in case you want to remove your previous rectangle before drawing the new one, you will need to:

Define your canvas context (ctx) outside your rectangle function, so you can access it inside randomMove directly
Define this bit just before calling your rectangle function to clear the previous drawing:

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

edited Apr 9, 2021 at 6:37

answered Apr 9, 2021 at 6:23

ale917k

1,8487 gold badges23 silver badges43 bronze badges

1 Comment

Anastazy Over a year ago

Did you meant setTimeout instead of setInterval?

Collectives™ on Stack Overflow

How do I make a loop with a timer in canvas in javascript?

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related