Resizing canvas to full browser window width and height

Question

Resizing canvas to full browser window width and height

I'm playing around with a node/socket.io Pictionary game. I apologize in advance, I am a designer and not too keen with js.

I'm just trying to re-size the canvas so it will be the entire width and height of a browser window without scaling up the stroke path? Right now, the Javascript sets the canvas to 500px.

Here is the relevant code:

// ================================================
//                           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;

        // ...
    }
});

javascript
html5
node.js
canvas
socket.io

Answer 1

You're using jQuery to change the dimensions, and that won't work well with canvas (it will scale the canvas contents too). Set the dimensions directly on the canvas element:

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

To set the canvas to the full window dimensions, try this:

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

Answer 2

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

worked great.

Answer 3

Use clientWidth and clientHeight property of canvas

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;
}

and set the css for canvas width and height to 100%;