How to make Canvas fulfilled the page-CodePudding

How I can make Canvas which fulfilled the visible part of page. Everything what I tried give me bigger canvas with scrollbars, or significantly smaller.

<!DOCTYPE html>
<html>
<body>
<p></p>
<canvas id="myCanvas" style="border:1px solid #000000;">
Your browser does not support the canvas element.
</canvas>

<script>
canvasInit();


function canvasInit() {
    var dimension = [document.documentElement.clientWidth, document.documentElement.clientHeight];
    var c = document.getElementById("myCanvas");
    c.width = dimension[0];
    c.height = dimension[1];
}


</script>
</body>
</html>

CodePudding user response：

I think something like this should work:

c.width = window.innerWidth * 2;
c.height = window.innerHeight * 2;
c.style.width = `${window.innerWidth}px`;
c.style.height = `${window.innerHeight}px`;

CodePudding user response：

I think you can do this.

set the width like this.

width = window. innerWidth; canvas. height = window. innerHeight;

You could even change it in your javascript

var canvasW     = 640;
var canvasH     = 480;

Even better, you can just put this in your canvasinit() function.

canvas.width = document.body.clientWidth; //document.width is obsolete
canvas.height = document.body.clientHeight; //document.height is obsolete
canvasW = canvas.width;
canvasH = canvas.height;