我不明白为什么我不能在CSS或中将宽度和高度设置为内部窗口的宽度和高度，但我必须两者都做。如果我不同时设置它们，我的画布元素将不会显示我的绘画。身高也是一样。这是我的代码：
<!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>
CSS和javascript在本例中指的是两个独立的大小。Canvas元素有自己的特定维度(我认为默认为300x150(，也有可以用CSS控制的HTMLElement维度。你可以在css中设置尺寸并使用相对值，例如：
//startup code
let canvas = document.getElementsByTagName("canvas")[0];
//canvas.width = window.innerWidth;
//canvas.height = window.innerHeight
//drawing
let x = 659 * canvas.width/ document.body.offsetWidth;
let width = 100 * canvas.width / document.body.offsetWidth;
let y = 327 * canvas.height / document.body.offsetHeight;
let height = 100 * canvas.height / document.body.offsetHeight;
let context = canvas.getContext("2d");
context.fillRect(x, y, width, height); // pixel coordinates start from the the top right
我没有设置值，但如果有点模糊，它看起来应该是一样的。把它想象成一个监视器；CSS控制监视器的物理大小，JS画布维度是分辨率。