<body>
  <div id="app">
    <div class="canvas" id="canvas">
      <div class="element"></div>
      <div class="element2"></div>
    </div>
  </div>

</body>


body {
  font-family: sans-serif;
  height: 100vh;
  width: 100%;
}

#app {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  background-color: brown;
}

.canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: green;
}

.element {
  position: absolute;
  top: 50px;
  left: 50px;
  width: 100px;
  height: 100px;
  background-color: blue;
}

.element2 {
  position: absolute;
  top: 300px;
  left: 50px;
  width: 100px;
  height: 100px;
  background-color: red;
}

let scale = 1;

window.addEventListener("keydown", (e) => {
  
  if (e.key === "+") {
    scale += 0.2;
  } else if (e.key === "-") {
    scale -= 0.2;
  }
  console.log("scale: ", scale);
  document.getElementById("canvas").style.transform = `scale(${scale})`;
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.