In an attempt to simplify my problem, I have created a basic HTML document with a <canvas> element:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
body {
border: 1px solid #ff5500;
background-color: black;
}
canvas {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<canvas id="canv" style='width:1024px;height:768px'>
</canvas>
</body>
</html>
Despite my efforts to adjust the width and height properties (using various units of measurement), including setting the style explicitly (e.g.
style='width:1024px;height:768px'Below is the output from the developer console:
var c = document.getElementById("canv");
undefined
c.style.width
"1024px"
c.style.height
"768px"
c.width
300
c.height
150
This issue persists across both Chromium and Firefox browsers.
Despite extensive searching on Stack Overflow and the internet in general, I have been unable to find a solution specific to this issue, despite researching the distinctions between width and clientWidth, and locating a related query concerning Fabric.js.