asked on

browser showing the X and Y scrollbars when I declare canvas the same size as my browser

Dear experts,

I came across this issue when declaring the <canvas></canvas> in the <body> tag. I want the canvas to be as big as my browser. I assigned an id to my canvas as 'myCanvas' and applied these code in javascript:

var myCanv = document.getElementById('myCanvas');
myCanv.width = window.innerWidth;
myCanv.height = window.innerHeight;

for my html code it looks like this:

<!DOCTYPE html>
<head>
<meta>....
<link rel="stylesheet" href="../canvas.css"/>
</head>
<body>
<canvas id="myCanvas"></canvas>
<script src="../canvas.js></script>
</body>

I see the horizontal and vertical scroll bars. I wonder why am I getting the scroll bar which I haven't include anything into my canvas and my canvas has the same size as the window inner width and height.

I've also tried document.body.scrollWidth, body.clientWidth, $(window).width(), and document.documentElement.clientWidth. ( I can see some of those have different outputs but I can't get rid of the scroll bars).

I've also tried swapping <canvas> with <div> which the <div> doesn't show the scroll bars.

Is there a way for me to declare canvas the same size as my browser display without showing the X and Y scrollbars? Thanks

SOLUTION

Zakaria Acharki

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

ASKER CERTIFIED SOLUTION

Snarf0001

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Kinderly Wade

ASKER

thanks all. As long as I use CSS it works good. If I use javascript then I will run into some screen size issue unless I have to overcome it with overflow: hidden in css in order to compensate for javascript size