Javascript 将画布调整为全浏览器窗口宽度和高度

我正在玩node/socket.io象形游戏。我提前道歉，我是一名设计师，对js不太感兴趣

我只是尝试重新调整画布的大小，使其成为浏览器窗口的整个宽度和高度，而无需放大笔划路径？现在，Javascript将画布设置为500px

以下是相关代码：

// ================================================
//                           canvas drawing section
// ================================================

var canvas = $('#canvas'),
    context = canvas[0].getContext('2d');

socket.on('drawCanvas', function(canvasToDraw) {
    if(canvasToDraw) {
        canvas.width(500);
        context.lineJoin = 'round';
        context.lineWidth = 2;

        // ...
    }
});

---

您正在使用jQuery来更改维度，这对画布不起作用（它也会缩放画布内容）。直接在画布元素上设置尺寸：

canvas[0].width = 500;
// Or:
canvas.get(0).width = 500;

要将画布设置为完整的窗口尺寸，请尝试以下操作：

canvas[0].width = $(window).width();
canvas[0].height = $(window).height();

---

非常好。

使用画布的clientWidth和clientHeight属性

if (canvas[0].width != canvas[0].clientWidth || canvas[0].height != canvas[0].clientHeight) {
    canvas[0].width = canvas[0].clientWidth;
    canvas[0].height = canvas[0].clientHeight;
}

---

并将画布宽度和高度的css设置为100%

因此，如果我理解正确，您的说法将插入到如下区域：

socket.on（'drawCanvas'，function（canvasToDraw）{if（canvasToDraw）{canvas.width（500）；context.lineJoin='round'；context.lineWidth=2；

？我希望它是100%宽度和100%高度，而不是500px。非常感谢。是的。我相信jQuery会尝试设置style.width，这在canvas中不起作用。@davidliberto但现在我想我误解了这个问题，你在问一些不同的问题……没有prob.-）我所要做的就是将画布设置为浏览器窗口的宽度/高度，这样用户就不必在500像素的画布内绘制。他们将有很大的空间！无论如何，谢谢。@DavidLiberto我编辑了大部分代码，以使您的问题更集中，对其他访问者更有用。希望您不要介意。

if (canvas[0].width != canvas[0].clientWidth || canvas[0].height != canvas[0].clientHeight) {
    canvas[0].width = canvas[0].clientWidth;
    canvas[0].height = canvas[0].clientHeight;
}