CODEWITHSUNDEEP
javascripthtmlcanvas
Lupos
Lupos

Reputation: 906

Animation loop with canvas dont work

I want a loop that the same animation alwys come.But it dont work if somenone can help me i will be really happy. Now to the detail so the animation runs one time an than they stop.But the animation should run after the first run one more time and after this runs one more and so on.

console.log("Start");
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d'); //ctx = contex
var img = new Image();
img.src = "../img/cookie.png";


canvas.width = canvas.scrollWidth;
canvas.height = canvas.scrollHeight;

console.log("Loaded image");
var add = 10;

onload = function Hallo() {
    if (add == 500) {
        console.log("resetet")

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

        ctx.beginPath();
        ctx.rect(0, 0, 1000, 1000);
        ctx.fillStyle = "lightblue";
        ctx.fill();

        ctx.drawImage(img, 0, 0, 100, 100);
        ctx.drawImage(img, 100, 0, 100, 100);
        ctx.drawImage(img, 200, 0, 100, 100);
        ctx.drawImage(img, 300, 0, 100, 100);
        ctx.drawImage(img, 400, 0, 100, 100);
        ctx.drawImage(img, 500, 0, 100, 100);
        ctx.drawImage(img, 600, 0, 100, 100);
        ctx.drawImage(img, 700, 0, 100, 100);

    } else {
        console.log("Animation beginnt")

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

        ctx.beginPath();
        ctx.rect(0, 0, 1000, 1000);
        ctx.fillStyle = "lightblue";
        ctx.fill();

        ctx.drawImage(img, 0, add, 100, 100);
        ctx.drawImage(img, 100, add, 100, 100);
        ctx.drawImage(img, 200, add, 100, 100);
        ctx.drawImage(img, 300, add, 100, 100);
        ctx.drawImage(img, 400, add, 100, 100);
        ctx.drawImage(img, 500, add, 100, 100);
        ctx.drawImage(img, 600, add, 100, 100);
        ctx.drawImage(img, 700, add, 100, 100);

        add++;
        window.requestAnimationFrame(Hallo);
    }
}
window.requestAnimationFrame(Hallo);

Upvotes: 0

Views: 47

Answers (1)

ɢʀᴜɴᴛ
ɢʀᴜɴᴛ

Reputation: 32859

So many issues with your code. Here is how it should be done ...

console.log("Start");
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d'); //ctx = contex

canvas.width = canvas.scrollWidth;
canvas.height = canvas.scrollHeight;
var add = 10;

var img = new Image();

img.onload = function() {
   console.log("Loaded image");
   Hallo();
};

img.src = "http://lorempixel.com/100/100";

function Hallo() {
   if (add == 500) {

      add = 10; // need to reset add's value

      console.log("resetet");

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

      ctx.beginPath();
      ctx.rect(0, 0, 1000, 1000);
      ctx.fillStyle = "lightblue";
      ctx.fill();

      ctx.drawImage(img, 0, 0, 100, 100);
      ctx.drawImage(img, 100, 0, 100, 100);
      ctx.drawImage(img, 200, 0, 100, 100);
      ctx.drawImage(img, 300, 0, 100, 100);
      ctx.drawImage(img, 400, 0, 100, 100);
      ctx.drawImage(img, 500, 0, 100, 100);
      ctx.drawImage(img, 600, 0, 100, 100);
      ctx.drawImage(img, 700, 0, 100, 100);



   } else {
      console.log("Animation begining");

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

      ctx.beginPath();
      ctx.rect(0, 0, 1000, 1000);
      ctx.fillStyle = "lightblue";
      ctx.fill();

      ctx.drawImage(img, 0, add, 100, 100);
      ctx.drawImage(img, 100, add, 100, 100);
      ctx.drawImage(img, 200, add, 100, 100);
      ctx.drawImage(img, 300, add, 100, 100);
      ctx.drawImage(img, 400, add, 100, 100);
      ctx.drawImage(img, 500, add, 100, 100);
      ctx.drawImage(img, 600, add, 100, 100);
      ctx.drawImage(img, 700, add, 100, 100);

      add++;
   }

   requestAnimationFrame(Hallo); // need to call this here
}
<canvas id="canvas" width="800" height="600"></canvas>

apology for not giving explanation

ʜᴀᴠᴇ ꜰᴜɴ :)

Upvotes: 1

Related Questions