0

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?

user1448485
  • 47
  • 1
  • 8
  • What screen you want to fill: computer, tablet, phone, etc.? – PM 77-1 Sep 13 '19 at 21:11
  • Possible duplicate of [Canvas width and height in HTML5](https://stackoverflow.com/questions/4938346/canvas-width-and-height-in-html5) – Cue Sep 13 '19 at 21:11
  • I want it to be 2700px wide minimum so that it fills all screens, it does not need to be responsive, it does not need to stretch – user1448485 Sep 13 '19 at 21:19

1 Answers1

2

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).

j6m8
  • 2,261
  • 2
  • 26
  • 34
  • That's what this site is for! If this solved your problem, marking as an accepted answer is appreciated :) – j6m8 Sep 13 '19 at 21:24