I'm struggling to understand why I need to set both the width and height to 100% in CSS AND also set them to match the inner window width and height for my canvas element to display my drawing properly. If I only set one or the other, it just doesn't work. The same issue applies to the height as well. Here's the code snippet:
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>TESTING CANVAS DRAWING</title>
<style>
body {
margin: 0px;
}
canvas {
border: 2px soild black;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<canvas>
Your browser does not support the HTML5 canvas tag.
</canvas>
<script>
//startup code
let canvas = document.getElementsByTagName("canvas")[0];
canvas.width = window.innerWidth;
canvas.height = window.innerHeight
//drawing
let context = canvas.getContext("2d");
context.fillRect(659, 327, 100, 100); // pixel coordinates start from the the top right
</script>
</body>
</html>