CODEWITHSUNDEEP
javascripthtmlhtml5-canvas
Yasik raam
Yasik raam

Reputation: 61

Draw array of images in separate canvas

Im working with canvas

I want to load images in different canvas but the problem is all the images are drawn in the same canvas

I want the images to be loaded separately in each canvas dynamically

I have shared the js fiddle below along with the code

https://jsfiddle.net/ewhom2db/

HTML

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

JS

     let sampleData = [
  {"imageWidth":3000,"imageHeight":2000,"imagePrefix":"https://swall.teahub.io/photos/small/","thumbPath":"291-2915301_crculos-gradiente-desvanecidos-degradado-3000-x-2000.jpg","x1":200,"x2":150,"y1":150,"y2":200},
  {"imageWidth":2000,"imageHeight":2000,"imagePrefix":"https://swall.teahub.io/photos/small/","thumbPath":"281-2819581_2000-x-2000-wallpapers-25238i6-anime-photos-2000.jpg","x1":200,"x2":150,"y1":150,"y2":200}
];

      var canvas = document.getElementById("canvas");
  

      var ctx = canvas.getContext("2d");
      // ctx.clearRect(0, 0, canvas.width, canvas.height);


      for (let i = 0; i < sampleData.length; i++) {

let base_image = new Image();
  base_image.src = sampleData[i].imagePrefix + sampleData[i].thumbPath;
  let x1 = sampleData[i].x1;
  let x2 = sampleData[i].x2;
  let y1 = sampleData[i].y1;
  let y2 = sampleData[i].y2;
    let imageWidth = sampleData[i].imageWidth;
  let imageHeight = sampleData[i].imageHeight;

canvas.width = imageWidth;
canvas.height = imageHeight;


base_image.onload = function () {
  // base_image.src = this.sampleData[i].imagePrefix + this.sampleData[i].thumbPath;
ctx.drawImage(base_image, 0, 0);

ctx.strokeRect(x1, y1, x2 - x1, y2 - y1);
// base_image.src.push(this.sampleData[i].imagePrefix + this.sampleData[i].thumbPath);

  };


      }

Help will be appreciated thanks

Upvotes: 0

Views: 195

Answers (1)

Justin
Justin

Reputation: 2958

You are drawing over the same canvas context every time you draw an image. If you want to draw each image to a separate canvas then you need to have separate canvases to draw them to.

You could create an array of canvases and then draw to the context of each canvas.

let sampleData = [
  {
    imageWidth: 3000,
    imageHeight: 2000,
    imagePrefix: "https://swall.teahub.io/photos/small/",
    thumbPath:
      "291-2915301_crculos-gradiente-desvanecidos-degradado-3000-x-2000.jpg",
    x1: 200,
    x2: 150,
    y1: 150,
    y2: 200
  },
  {
    imageWidth: 2000,
    imageHeight: 2000,
    imagePrefix: "https://swall.teahub.io/photos/small/",
    thumbPath:
      "281-2819581_2000-x-2000-wallpapers-25238i6-anime-photos-2000.jpg",
    x1: 200,
    x2: 150,
    y1: 150,
    y2: 200
  }
];

let canvas = [];
let ctx = [];
for (let i = 0; i < sampleData.length; i++) {
  canvas.push(document.createElement("canvas"))
  ctx.push(canvas[i].getContext('2d'));
  document.body.appendChild(canvas[i]);
  
  let base_image = new Image();
  base_image.src = sampleData[i].imagePrefix + sampleData[i].thumbPath;
  let x1 = sampleData[i].x1;
  let x2 = sampleData[i].x2;
  let y1 = sampleData[i].y1;
  let y2 = sampleData[i].y2;
  let imageWidth = sampleData[i].imageWidth;
  let imageHeight = sampleData[i].imageHeight;

  canvas[i].width = imageWidth;
  canvas[i].height = imageHeight;
  
  base_image.onload = function () {
    // base_image.src = this.sampleData[i].imagePrefix + this.sampleData[i].thumbPath;
    ctx[i].drawImage(base_image, 0, 0);
    ctx[i].strokeRect(x1, y1, x2 - x1, y2 - y1);
    // base_image.src.push(this.sampleData[i].imagePrefix + this.sampleData[i].thumbPath);
  };
}

Your image appear to be so far apart because your canvases are huge but the image doesn't fill the canvas.

Upvotes: 1

Related Questions