I am trying to build a canvas like element using div.
I have a div element that is acting as a canvas, this div element can zoom and pan. This div.canvas element is placed inside a container. I achieve the zooming and panning effects using css transforms scale and translate.
(the black is the container, the green is the div.canvas and inner red square is inner element)
Every time, I zoom out the div(acting as canvas) width and height is also scaled down and not is not 100% to the container.
here’s a codesandbox that can replicate the problem. (use +, – keys for zooming)
// import "./styles.css";
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})`;
});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;
}<!DOCTYPE html>
<html>
<head>
<title>JavaScript Sandbox</title>
<meta charset="UTF-8" />
</head>
<body>
<div id="app">
<div class="canvas" id="canvas">
<div class="element"></div>
</div>
</div>
<!-- <script src="./index.mjs" type="module"></script> -->
</body>
</html>You’ll notice every time you scale down pressing - key, the div.canvas becomes smaller as well.
how can I ensure everytime I zoom, it affects only the contents inside the div.canvas instead of the div itself or how can I make sure that the div.canvas is always 100% of the parent container?
Edit:
My endgoal is something like this, but have infinite canvas(green div) fill the container.
You should change the scale of the child elements of canvas instead of canvas itself:
let scale = 1;
window.addEventListener("keydown", (e) => {
if (e.key === "+") scale += 0.2;
if (e.key === "-") scale -= 0.2;
const canvas = document.getElementById("canvas");
const children = canvas.children // get the child elements
for(const child of children){
child.style.transform = `scale(${scale})`; // pass the scale to the childs only
}
});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;
}<!DOCTYPE html>
<html>
<head>
<title>JavaScript Sandbox</title>
<meta charset="UTF-8" />
</head>
<body>
<div id="app">
<div class="canvas" id="canvas">
<div class="element"></div>
</div>
</div>
<!-- <script src="./index.mjs" type="module"></script> -->
</body>
</html>5