Make HTML Canvas fit screen

Question

I would like to make it so that the HTML Canvas element has a width = to the browser window width, and height = the browser window height. Below is the code I use.

HTML:

   <body>
       <canvas id="gameCanvas"></canvas>
   <body />

JS:

function Main() {
   this.canvas;
   this.context;
   this.canvasWidth;
   this.canvasheight;

   this.screenWidth;
   this.screenHeight;

   this.boxWidth;
   this.boxHeight;

   //This function is used to gather all required startup data
   this.initalize = function (canvas) {
      this.canvas = canvas;
      this.context = this.canvas[0].getContext('2d');

   }

   //This function is used to size the canvas to the screen size
   this.sizeCanvas = function () {
      this.canvas.css("width", this.screenWidth + "px");
      this.canvas.css("height", this.screenHeight + "px");
      this.canvas[0].width = this.screenWidth;
      this.canvas[0].height = this.screenHeight;


   }

   //This function is used to draw a stickman
   this.drawStickMan = function (x, y) {
      var headRadius = 0;
      if (this.boxWidth < this.boxHeight) {
          headRadius = this.boxWidth;

      } else {
          headRadius = this.boxHeight;

      }

      this.context.beginPath();
      this.context.arc(x + this.boxWidth, y + this.boxHeight, headRadius, 0, 2 * Math.PI);
      this.context.stroke();
      console.log("run" + this.boxHeight);

   }

   //This function is run on page load, and when the screen resizes
   this.resize = function () {
      this.screenWidth = screen.width;
      this.screenHeight = screen.height;
      this.sizeCanvas();

      this.canvasWidth = this.canvas[0].width;
      this.canvasheight = this.canvas[0].height;

      this.boxWidth = this.canvasWidth / 16;
      this.boxHeight = this.canvasheight / 32;
      this.drawStickMan(100, 100);

   }

}

JS that runs the above class:

   //This function is used to run the game
$(document).ready(function () {
   var main = new Main();
   main.initalize($("#gameCanvas"));
   main.resize();

   //run whenever screen size changes
   $(window).resize(function () {
      main.resize();
   });

});

No matter what I do I cannot seem to get the canvas to fit the entire screen. I am unsure of the reason the canvas will not fit. I believe that the problem is in the sizeCanvas function.

`position:absolute; top:0; left:0; width: 100%; height: 100%;` — Martijn, Sep 27 '17 at 08:43
[try that answer , maybe solving your issue](https://stackoverflow.com/a/3078427/6002328) — Nagy István, Sep 27 '17 at 08:44
Possible duplicate of [onclick go full screen](https://stackoverflow.com/questions/3900701/onclick-go-full-screen) — Martijn, Sep 27 '17 at 10:01

score 0 · Answer 1 · answered Sep 27 '17 at 08:37

0

Try this for your CSS:

body {
  margin: 0;
}

#gameCanvas {
  width: 100vw;
  height: 100vh;
}

answered Sep 27 '17 at 08:37

Andrew Harris

118
8

score 0 · Answer 2 · answered Sep 27 '17 at 08:42

0

Try this:

html, body {
    height: 100%;
}

#gameCanvas {
    width: 100%;
    height: 100%;
}

The 100% has to filter down from the html element or else it won't fill the height of the screen.

answered Sep 27 '17 at 08:42

Web Develop Wolf

5,046
3
39
70

Make HTML Canvas fit screen

2 Answers2

Linked