axlpl axlpl - 4 months ago 10
Javascript Question

Canvas is not drawing images

I have problem with canvas, I'm trying to draw images but is not working as you can see I'm loading images into array and wait for all is loaded after this I'm changing my images each iteration but is not drawing any one, please look at my code. I cannot find error :(

(() => {
"use strict";

const images = [];
const promises = [];
const url = './assets/';
const canvas = document.getElementById("canvas");
const context = canvas.getContext("2d");
const FPS = 30;
const INTERVAL = 10000 / FPS;

const canvasDraw = () => {
let i = 0;

setInterval(() => {
context.drawImage(images[i] , 300, 300);
i++;
if (i === images.length) i = 0;
}, INTERVAL);
};

const loadImage = (image) => {
return new Promise((resolve) => {
const img = new Image();

img.src = url + image + '.png';
img.onload = function () {
images.push(img);
resolve();
};
});
};

for(let i = 1; i < 14; i++) {
promises.push(loadImage(i));
}

Promise
.all(promises)
.then(() => {
canvasDraw();
});
})();


and my html file contains canvas like this one

<canvas id="canvas"></canvas>

Answer

You need to give your canvas a width and height.

Using placeholder images:

(() => {
  "use strict";

  const images = [];
  const promises = [];
  const url = './assets/';
  const canvas = document.getElementById("canvas");
  const context = canvas.getContext("2d");
  const FPS = 30;
  const INTERVAL = 10000 / FPS;

  const canvasDraw = () => {
    let i = 0;

    setInterval(() => {
      context.drawImage(images[i] , 0, 0);
      i++;
      if (i === images.length) i = 0;
    }, INTERVAL);
  };

  const loadImage = (image) => {
    return new Promise((resolve) => {
      const img = new Image();

      img.src = 'https://placehold.it/' + (image * 20) + 'x' + (image * 20);
      img.onload = function () {
        images.push(img);
        resolve();
      };
    });
  };

  for(let i = 1; i < 14; i++) {
    promises.push(loadImage(i));
  }

  Promise
    .all(promises)
    .then(() => {
      canvasDraw();
    });
})();
<canvas id="canvas" width="300" height="300"></canvas>

Depending on what you're doing, you may want to clear the canvas between renderings.

(() => {
  "use strict";

  const images = [];
  const promises = [];
  const url = './assets/';
  const canvas = document.getElementById("canvas");
  const context = canvas.getContext("2d");
  const FPS = 30;
  const INTERVAL = 10000 / FPS;

  const canvasDraw = () => {
    let i = 0;

    setInterval(() => {
      context.clearRect(0, 0, canvas.width, canvas.height); // Clear the canvas
      context.drawImage(images[i] , 0, 0);
      i++;
      if (i === images.length) i = 0;
    }, INTERVAL);
  };

  const loadImage = (image) => {
    return new Promise((resolve) => {
      const img = new Image();

      img.src = 'https://placehold.it/' + (image * 20) + 'x' + (image * 20);
      img.onload = function () {
        images.push(img);
        resolve();
      };
    });
  };

  for(let i = 1; i < 14; i++) {
    promises.push(loadImage(i));
  }

  Promise
    .all(promises)
    .then(() => {
      canvasDraw();
    });
})();
<canvas id="canvas" width="300" height="300"></canvas>

Comments