CODEWITHSUNDEEP
javascripthtmlimagecanvasdraw
axlpl
axlpl

Reputation: 483

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>

Upvotes: 0

Views: 122

Answers (1)

Mike Cluck
Mike Cluck

Reputation: 32511

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>

Upvotes: 2

Related Questions