Javascript HTML画布在全屏大小上变得模糊

我想在画布上画一些矩形。此画布应具有全屏大小

不调整画布大小的正确视图：

$（文档）.ready（（）=>{
const canvas=$（#c'）[0]；
const ctx=canvas.getContext（'2d'）；
ctx.lineWidth=1；
for（设i=0；i<10；i++）{
const rect height=100；
常数垂直位置=i*rectHeight+（i+1）*10；
ctx.冲程（10，垂直位置，200，垂直高度）；
}
});
您可以在JavaScript中声明画布的宽度和高度。将尺寸设置为窗口的宽度和高度


$（文档）.ready（（）=>{
const canvas=$（#c'）[0]；
//设置画布大小
canvas.width=window.innerWidth；
canvas.height=window.innerHeight；
const ctx=canvas.getContext（'2d'）；
ctx.lineWidth=1；
for（设i=0；i<10；i++）{
const rect height=100；
常数垂直位置=i*rectHeight+（i+1）*10；
ctx.冲程（10，垂直位置，200，垂直高度）；
}
});
正文{
保证金：0；
}
我认为这是CSS的常见问题。我宁愿使用JS：

canvas.width = document.body.clientWidth; 
canvas.height = document.body.clientHeight;

我也遇到了同样的问题，只需将画布元素的
width
和
height
属性设置为
offsetWidth
和
offsetHeight
属性，就解决了这个问题。画布的内部尺寸是根据
宽度
和
高度
属性计算的，令人惊讶的是，在CSS中将它们设置为100%并没有设置它们。因此，您的工作代码是：


$（文档）.ready（（）=>{
const canvas=$（#c'）[0]；
const ctx=canvas.getContext（'2d'）；
canvas.width=canvas.offsetWidth；
canvas.height=canvas.offsetHeight；
ctx.lineWidth=1；
for（设i=0；i<10；i++）{
const rect height=100；
常数垂直位置=i*rectHeight+（i+1）*10；
ctx.冲程（10，垂直位置，200，垂直高度）；
}
});
#c{
宽度：100%；
身高：100%；
}

当窗口加载和调整大小时，您可以使用JavaScript设置画布的宽度和高度（以像素为单位），而不是缩放。另外，您不需要jQuery。但是如何在所有显示器上获得全屏显示的正确像素？
window.innerWidth
和
window.innerHeight
：）是否存在与
window.innerWidth
等效的CSS？我认为画布是不可能的。@MatthiasHermsen您似乎误解了这个问题。如果希望画布数据的内在维度与画布的实际维度相匹配，则不可能使用CSS调整元素的大小。