CODEWITHSUNDEEP
javascriptjquery
user1448485
user1448485

Reputation: 47

Javascript 'window' width and height calculations

I'm playing with a bit of code to create a canvas element that ideally fills the screen, however there's this bit of javascript that I believe is rendering the canvas container to the width / height of the browser window, when really I want it to be a fixed pixel width that I determine

var canvas = document.querySelector("#canvas2"),
ctx = canvas.getContext('2d');

// Set Canvas to be window size
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

Would anyone be so kind as to tell m what I need to replace the window.innerWidth and window.innerHeight with to become a fixed width / height?

Upvotes: 0

Views: 61

Answers (1)

j6m8
j6m8

Reputation: 2399

canvas.width = 2700. Yes, it really is that easy.

You can also do this with CSS if you know the element is going to exist before the page loads:

canvas {
    min-width: 2700px;
}

The benefit of using CSS here is that many canvas drawing libraries will fail to draw correctly if the canvas size changes (prone to happening when JavaScript affects an element after its first paint).

Upvotes: 2

Related Questions