0
211
ViewsHow to make Canvas fulfilled the page
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>
·
Juan Pablo Isaza
2 answers
Answer question0
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`;
·
Juan Pablo Isaza
Report
0
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;
·
Juan Pablo Isaza
Report
Answer question