<head>
  <style>
        .grid-container,body,html {
      width: 99vw;
      height: 99vh;
      display: grid;
      grid-template-columns: repeat(2, 2fr);
      grid-template-rows: repeat(2, 2fr);
      object-fit: contain;
      overflow:hidden;
      gap:1px;
    }
    canvas {
      width: 100%;
      height: 100%;
      border: solid 1px black;
      object-fit: contain;
      overflow:hidden;
    }
    
.grid-item {
  display: none;
  border: 1px solid #000;
}

.grid-item.canvas {
  display: block;
}

.buttons {
  text-align: center;
}

button {
  margin: 5px;
  padding: 10px;
}
  </style>
</head>
<body>
  <div class=“buttons”>
    <button onclick=“toggleCanvas(1)”> One Canvas </button>
    <button onclick=“toggleCanvas(2)”> Two Canvases </button>
    <button onclick=“toggleCanvas(3)”> Three Canvases </button>
    <button onclick=“toggleCanvas(4)”> Four Canvases </button>
  </div>

  <div class=“grid-container”>
    <canvas id=“canvas1” class=“grid-item canvas”> Canvas 1 </canvas>
    <canvas id=“canvas2” class=“grid-item canvas”> Canvas 2 </canvas>
    <canvas id=“canvas3” class=“grid-item canvas”> Canvas 3 </canvas>
    <canvas id=“canvas4” class=“grid-item canvas”> Canvas 4 </canvas>
  </div>

  <script>
    // function to load image placeholders in different dimensions inside canvases
    function loadImages(canvasIds) {
      canvasIds.forEach((id) => {
        const canvas = document.getElementById(id);
        const ctx = canvas.getContext(“2d”);
        const image = new Image();
        image.onload = () => {
          const w = image.width;
          const h = image.height;
          if (w > h) {
            const scale = w / h;
            canvas.width = 100 * scale;
            canvas.height = 100;
          } else {
            const scale = h / w;
            canvas.width = 100;
            canvas.height = 100 * scale;
          }
          ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
        };
        image.src = (https://picsum.photos/id/ + Math.floor(Math.random() * 512) + /${Math.floor(Math.random() * 512)}/128);
      });
    }

    // call the function to load images in canvases
    loadImages([“canvas1”, “canvas2”, “canvas3”, “canvas4”]);
    
    function toggleCanvas(count) {
  const canvases = document.querySelectorAll(‘.canvas’);

  for (let i = 0; i < canvases.length; i++) {
    if (i < count) {
      canvases[i].style.display = ‘block’;
    } else {
      canvases[i].style.display = ‘none’;
    }
  }
}</script>
</body>


<head>
  <style>
        .grid-container,body,html {
      width: 99vw;
      height: 99vh;
      display: grid;
      grid-template-columns: repeat(2, 2fr);
      grid-template-rows: repeat(2, 2fr);
      object-fit: contain;
      overflow:hidden;
      gap:1px;
    }
    canvas {
      width: 100%;
      height: 100%;
      border: solid 1px black;
      object-fit: contain;
      overflow:hidden;
    }
    
.grid-item {
  display: none;
  border: 1px solid #000;
}

.grid-item.canvas {
  display: block;
}

.buttons {
  text-align: center;
}

button {
  margin: 5px;
  padding: 10px;
}
  </style>
</head>
<body>
  <div class=“buttons”>
    <button onclick=“toggleCanvas(1)”> One Canvas </button>
    <button onclick=“toggleCanvas(2)”> Two Canvases </button>
    <button onclick=“toggleCanvas(3)”> Three Canvases </button>
    <button onclick=“toggleCanvas(4)”> Four Canvases </button>
  </div>

  <div class=“grid-container”>
    <canvas id=“canvas1” class=“grid-item canvas”> Canvas 1 </canvas>
    <canvas id=“canvas2” class=“grid-item canvas”> Canvas 2 </canvas>
    <canvas id=“canvas3” class=“grid-item canvas”> Canvas 3 </canvas>
    <canvas id=“canvas4” class=“grid-item canvas”> Canvas 4 </canvas>
  </div>

  <script>
    // function to load image placeholders in different dimensions inside canvases
    function loadImages(canvasIds) {
      canvasIds.forEach((id) => {
        const canvas = document.getElementById(id);
        const ctx = canvas.getContext(“2d”);
        const image = new Image();
        image.onload = () => {
          const w = image.width;
          const h = image.height;
          if (w > h) {
            const scale = w / h;
            canvas.width = 100 * scale;
            canvas.height = 100;
          } else {
            const scale = h / w;
            canvas.width = 100;
            canvas.height = 100 * scale;
          }
          ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
        };
        image.src = (https://picsum.photos/id/ + Math.floor(Math.random() * 512) + /${Math.floor(Math.random() * 512)}/128);
      });
    }

    // call the function to load images in canvases
    loadImages([“canvas1”, “canvas2”, “canvas3”, “canvas4”]);
    
    function toggleCanvas(count) {
  const canvases = document.querySelectorAll(‘.canvas’);

  for (let i = 0; i < canvases.length; i++) {
    if (i < count) {
      canvases[i].style.display = ‘block’;
    } else {
      canvases[i].style.display = ‘none’;
    }
  }
}</script>
</body>


<head>
  <style>
    .grid-container,body,html {
      width: 99vw;
      height: 99vh;
      display: grid;
      grid-template-columns: repeat(2, 2fr);
      grid-template-rows: repeat(2, 2fr);
      object-fit: contain;
      overflow:hidden;
      gap:1px;
    }
    canvas {
      width: 100%;
      height: 100%;
      border: solid 1px black;
      object-fit: contain;
      overflow:hidden;
    }
    
    .grid-item {
      display: none;
      border: 1px solid #000;
    }

    .grid-item.canvas {
      display: block;
    }

    .buttons {
      text-align: center;
    }

    button {
      margin: 5px;
      padding: 10px;
    }
  </style>
</head>
<body>
  <div class=“buttons”>
    <button onclick=“toggleCanvas(1)”> One Canvas </button>
    <button onclick=“toggleCanvas(2)”> Two Canvases </button>
    <button onclick=“toggleCanvas(3)”> Three Canvases </button>
    <button onclick=“toggleCanvas(4)”> Four Canvases </button>
  </div>

  <div class=“grid-container”>
    <canvas id=“canvas1” class=“grid-item canvas”> Canvas 1 </canvas>
    <canvas id=“canvas2” class=“grid-item canvas”> Canvas 2 </canvas>
    <canvas id=“canvas3” class=“grid-item canvas”> Canvas 3 </canvas>
    <canvas id=“canvas4” class=“grid-item canvas”> Canvas 4 </canvas>
  </div>

  <script>
    function toggleCanvas(count) {
      const canvases = document.querySelectorAll(‘.canvas’);

      for (let i = 0; i < canvases.length; i++) {
        if (i < count) {
          canvases[i].style.display = ‘block’;
        } else {
          canvases[i].style.display = ‘none’;
        }
      }
    }
</script>
</body>


<head>
  <style>
    .grid-container,body,html {
      width: 99vw;
      height: 99vh;
      display: grid;
      grid-template-columns: repeat(2, 2fr);
      grid-template-rows: repeat(2, 2fr);
      object-fit: contain;
      overflow:hidden;
      gap:1px;
    }
    canvas {
      width: 100%;
      height: 100%;
      border: solid 1px black;
      object-fit: contain;
      overflow:hidden;
    }
    
    .grid-item {
      display: none;
      border: 1px solid #000;
    }

    .grid-item.canvas {
      display: block;
    }

    .buttons {
      text-align: center;
    }

    button {
      margin: 5px;
      padding: 10px;
    }
  </style>
</head>
<body>
  <div class=“buttons”>
    <button onclick=“toggleCanvas(1)”> One Canvas </button>
    <button onclick=“toggleCanvas(2)”> Two Canvases </button>
    <button onclick=“toggleCanvas(3)”> Three Canvases </button>
    <button onclick=“toggleCanvas(4)”> Four Canvases </button>
  </div>

  <div class=“grid-container”>
    <canvas id=“canvas1” class=“grid-item canvas”> Canvas 1 </canvas>
    <canvas id=“canvas2” class=“grid-item canvas”> Canvas 2 </canvas>
    <canvas id=“canvas3” class=“grid-item canvas”> Canvas 3 </canvas>
    <canvas id=“canvas4” class=“grid-item canvas”> Canvas 4 </canvas>
  </div>

  <script>
    function loadImages(canvasIds) {
      canvasIds.forEach((id) => {
        const canvas = document.getElementById(id);
        const ctx = canvas.getContext(“2d”);
        const image = new Image();
        image.onload = () => {
          ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
        };
        image.src = (https://picsum.photos/id/ + Math.floor(Math.random() * 512) + /${Math.floor(Math.random() * 512)}/128);
      });
    }

    // call the function to load images in canvases
    loadImages([“canvas1”, “canvas2”, “canvas3”, “canvas4”]);
    
    function toggleCanvas(count) {
      const canvases = document.querySelectorAll(‘.canvas’);

      for (let i = 0; i < canvases.length; i++) {
        if (i < count) {
          canvases[i].style.display = ‘block’;
        } else {
          canvases[i].style.display = ‘none’;
        }
      }
    }
</script>
</body>

maybe theres more simpler method to scale images to 100%? which other methods there in javascript?
Yes, there are simpler methods to scale images to 100% using JavaScript. One approach is to set the object-fit: cover property to the CSS of the canvas element. This will automatically scale the image to cover the entire canvas while maintaining its aspect ratio. Here’s the modified code:


<html>
<head>
  <style>
    .grid-container,body,html {
      width: 99vw;
      height: 99vh;
      display: grid;
      grid-template-columns: repeat(2, 2fr);
      grid-template-rows: repeat(2, 2fr);
      gap:1px;
    }
    canvas {
      width: 100%;
      height: 100%;
      border: solid 1px black;
      object-fit: cover;
    }
    
    .grid-item {
      display: none;
      border: 1px solid #000;
    }

    .grid-item.canvas {
      display: block;
    }

    .buttons {
      text-align: center;
    }

    button {
      margin: 5px;
      padding: 10px;
    }
  </style>
</head>
<body>
  <div class=“buttons”>
    <button onclick=“toggleCanvas(1)”> One Canvas </button>
    <button onclick=“toggleCanvas(2)”> Two Canvases </button>
    <button onclick=“toggleCanvas(3)”> Three Canvases </button>
    <button onclick=“toggleCanvas(4)”> Four Canvases </button>
  </div>

  <div class=“grid-container”>
    <canvas id=“canvas1” class=“grid-item canvas”> Canvas 1 </canvas>
    <canvas id=“canvas2” class=“grid-item canvas”> Canvas 2 </canvas>
    <canvas id=“canvas3” class=“grid-item canvas”> Canvas 3 </canvas>
    <canvas id=“canvas4” class=“grid-item canvas”> Canvas 4 </canvas>
  </div>

  <script>
    function loadImages(canvasIds) {
      canvasIds.forEach((id) => {
        const canvas = document.getElementById(id);
        const ctx = canvas.getContext(“2d”);
        const image = new Image();
        image.onload = () => {
          canvas.width = image.width;
          canvas.height = image.height;
          ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
        };
        image.src = https://picsum.photos/id/${Math.floor(Math.random() * 512)}/${Math.floor(Math.random() * 512)}/128;
      });
    }

    // call the function to load images in canvases
    loadImages([“canvas1”, “canvas2”, “canvas3”, “canvas4”]);
    
    function toggleCanvas(count) {
      const canvases = document.querySelectorAll(‘.canvas’);

      for (let i = 0; i < canvases.length; i++) {
        if (i < count) {
          canvases[i].style.display = ‘block’;
        } else {
          canvases[i].style.display = ‘none’;
        }
      }
    }
</script>
</body>
</html>



With this approach, the images will automatically scale to 100% width and height of the canvas while preserving their aspect ratio.
maybe theres more simpler method to scale images to 100% from javascript by keeping their aspectratios? which other methods there in javascript?
Yes, there is a simpler method to scale images to 100% while maintaining their aspect ratios in JavaScript. You can achieve this by setting either the max-width or max-height property of the image element to 100% in CSS. Here’s the modified code:


<html>
<head>
  <style>
    .grid-container,body,html {
      width: 99vw;
      height: 99vh;
      display: grid;
      grid-template-columns: repeat(2, 2fr);
      grid-template-rows: repeat(2, 2fr);
      gap:1px;
    }

    .grid-item {
      display: none;
      border: 1px solid #000;
    }

    .grid-item.canvas {
      display: block;
    }

    .buttons {
      text-align: center;
    }

    button {
      margin: 5px;
      padding: 10px;
    }

    img {
      max-width: 100%;
      max-height: 100%;
    }
  </style>
</head>
<body>
  <div class=“buttons”>
    <button onclick=“toggleCanvas(1)”> One Canvas </button>
    <button onclick=“toggleCanvas(2)”> Two Canvases </button>
    <button onclick=“toggleCanvas(3)”> Three Canvases </button>
    <button onclick=“toggleCanvas(4)”> Four Canvases </button>
  </div>

  <div class=“grid-container”>
    <canvas id=“canvas1” class=“grid-item canvas”></canvas>
    <canvas id=“canvas2” class=“grid-item canvas”></canvas>
    <canvas id=“canvas3” class=“grid-item canvas”></canvas>
    <canvas id=“canvas4” class=“grid-item canvas”></canvas>
  </div>

  <script>
    function loadImages(canvasIds) {
      canvasIds.forEach((id) => {
        const canvas = document.getElementById(id);
        const ctx = canvas.getContext(“2d”);
        const image = new Image();
        image.onload = () => {
          canvas.width = image.width;
          canvas.height = image.height;
          ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
        };
        image.src = https://picsum.photos/id/${Math.floor(Math.random() * 512)}/${Math.floor(Math.random() * 512)}/128;
      });
    }

    // call the function to load images in canvases
    loadImages([“canvas1”, “canvas2”, “canvas3”, “canvas4”]);
    
    function toggleCanvas(count) {
      const canvases = document.querySelectorAll(‘.canvas’);

      for (let i = 0; i < canvases.length; i++) {
        if (i < count) {
          canvases[i].style.display = ‘block’;
        } else {
          canvases[i].style.display = ‘none’;
        }
      }
    }
</script>
</body>
</html>



By setting the max-width and max-height to 100% for the img elements, the images will scale to fit within the canvas while maintaining their aspect ratios.
no, that method doesn’t work. it seems that javascript preloading images into canvas and all other consequent changes doesn’t affect any scallings.