We Keep Coding

why html5 canvas is not full screen when vertical scrollbar appears

I'm using a full screen canvas as background of the first section of my page. But as soon as I add the second section and vertical scrollbar appears, the height of canvas reduces a little bit and a gap appears. here's my code:
P.S: Sorry, my code contained bugs, I fixed them. now you can see the red gap.
var canvas = document.getElementById('canvas')
var c = canvas.getContext('2d')
scaleCanvas()
window.addEventListener("resize", scaleCanvas)
function scaleCanvas() {
canvas.width = window.innerWidth
canvas.height = window.innerHeight
c.fillStyle = 'black'
c.fillRect(0, 0, canvas.width, canvas.height)
}
* {
box-sizing: border-box;
max-width: 100%;
}
body {
margin: 0;
padding: 0;
}
#first-section {
position: relative;
min-height: 100vh;
background-color: red; /* to see the gap */
}
#content {
position: relative;
z-index: 2;
}
#second-section {
min-height: 100vh;
background-color: blue;
}
#canvas {
display: block;
padding: 0;
margin: 0;
border: none;
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
<div id="first-section">
<canvas id="canvas"></canvas>
<div id="content">content</div>
</div>
<div id="second-section"></div>

Assuming you mean full screen, and not full page. The two are very different.
If you mean full page then the link to the Screen API will also give you details on obtaining the page size.
Size full screen canvas.
The problem is that you have content that extends outside the page width and height (innerWidth, innerHeight)
The elements with ids first-section, content, and second-section must be inside the display area or else you will get a scroll bar. The scroll bar will change the innerWidth, innerHeight values subtracting the scrollbar width or height depending on which is visible.
To prevent scroll bars the best option is to keep all content inside innerWidth, and innerHeight
Full screen with scroll bars.
If you want have the scroll bars and you are using full screen you can use the Screen API to get the width and height of the display in pixels. You can set the canvas size to match the screen without the scroll bars effecting its size.
Note Do read the provided link to Screen as what defines the screen may not be as expected. EG more than one monitor, or device orientation will effect how you use the API.
Basic example
Thus when in full-screen mode you can set the canvas size and ignore scroll bars with
function sizeFullScreenCanvas() {
canvas.width = screen.width;
canvas.height= screen.height;
}

div position based on scroll position

I would like my logo to scroll up and down vertically based on the scroll position on the website.
In exactly the same way a default scroll bar indicates your position on the site, I would like my logo to do the same. When you are at the top of the website page, the logo sits at the top, and when you are at the bottom it will sit at the bottom of the page in a vertical bar on the left hand side of the web page.
I have no idea how to approach this, I have looked at a few plugins but none offer the positioning based on the content and I can't find any other Stack Overflow results that are what I am looking for, though I may not be phrasing the question correctly.
My setup is
.logo-scroll {
position: fixed;
border: 2px solid white;
top: 30px;
left: 30px;
height: calc(100vh - 60px);
width: 75px;
}
.scroll-text {
height: auto;
}
.logo-scroll .scroll-text img {
padding: 0 6px 0 17px;
}
and my html
<div class="logo-scroll">
<div class="scroll-text">
<a href="/home">
<img src="logo.svg"/>
</a>
</div>
</div>
Any help would be greatly appreciated
** Edit - to complicate things, I have a 30px border which is not to be included in the page height. So an offset of 30px on the top and bottom.
The size of the margin/border will need to change responsively at break points - 1 maybe 2, before I will hide it. Essentially the height of the scroll bar will always need to match the height of either the page with margins subtracted or the height of the :before element.
Alternatively if I can set offsets, I can reuse the JS and adjust based on screen size. Like media queries for JS?
You can see the web page here - which is still very under construction https://www.sheree-new.shereewalker.com/

You could give something like this a try.
window.addEventListener('scroll', e => {
const logo = document.querySelector('.scroll-text');
const logoHeight = logo.clientHeight;
const viewHeight = window.innerHeight;
const maxLogoOffset = viewHeight - logoHeight;
const scrollFraction = getElementScrollFraction(document.querySelector('body'));
logo.style.top = maxLogoOffset*scrollFraction;
});
function getElementScrollFraction(elem){
return elem.scrollTop / (elem.scrollHeight - elem.clientHeight);
}
You'll also need to add position:fixed; to the .scroll-text css.
Here is a working example: https://jsbin.com/yuholihece/edit?html,css,js,console,output

Here is my solution.
Edited:
const docHeight = Math.max(document.documentElement.scrollHeight, document.body.scrollHeight);
const logo = document.querySelector('.scroll-text');
const logoHeight = logo.offsetHeight;
// to get the pseudoelement's '#page::before' top we use getComputedStyle method
const barTopMargin = parseInt(getComputedStyle(document.querySelector('#page'), '::before').top);
let viewportHeight, barHeight, maxScrollDist, currentScrollPos, scrollFraction;
logo.style.top = barTopMargin + 'px';
window.addEventListener('load', update);
window.addEventListener('resize', setSizes);
document.addEventListener('scroll', update);
setSizes();
function update() {
currentScrollPos = Math.max(document.documentElement.scrollTop, document.body.scrollTop);
scrollFraction = currentScrollPos / (docHeight - viewportHeight);
logo.style.top = barTopMargin + (scrollFraction * maxScrollDist) + 'px';
}
function setSizes() {
viewportHeight = window.innerHeight;
// to get the pseudoelement's '#page::before' height we use getComputedStyle method
barHeight = parseInt(getComputedStyle(document.querySelector('#page'), '::before').height);
maxScrollDist = barHeight - logoHeight;
update();
}
And if I understand correctly, you want #page::before element to have like margins on its top, left, bottom and right. If so, then I think it would be better to use this styling rules:
#page::before {
content: "";
position: fixed;
top: 30px;
bottom: 30px;
left: 30px;
right: 30px;
...
}
When you use position: fixed property (or position: absolute), you can stretch the element's width and height as you want by just setting top - bottom and left - right properties at the same time.
P. S.: And also there is no sense in using display: inline-block, because position: fixed (and position: absolute) automatically sets display to block :)
Hopefully, this helps you!

How to get the height and width of window in bootstrap

In bootstrap I have a fixed top nav bar and fixed bottom nav bar. I want to show a large image in the background between the space of those two nav bars and I also want to cover the width of the window. How can I dynamically get the height between the navbars and the width of the window? The window size may change depending on device.So I need it dynamic

Requires jquery:
var viewport = {
width : $(window).width(),
height : $(window).height()
};
//can access dimensions like this:
//viewport.height
Though you won't always get perfect results, different devices behave differently and this gives the viewport dimensions, not the screen dimensions.
Alternatively you could check the width of a data-role="page" element to find the device-width (since it's set to 100% of the device-width):
var deviceWidth = 0;
$(window).bind('resize', function () {
deviceWidth = $('[data-role="page"]').first().width();
}).trigger('resize');​​​

$(window).resize(function() {
var top_nav_height = $("#id_of_top_nav").height();
var bottom_nav_height = $("#id_of_bottom_nav").height();
var window_height = $(window).height();
var height_of_open_space = window_height - (top_nav_height+bottom_nav_height);
$("#id_of_img").css({
height:height_of_open_space+'px';
});
});
this will be fine with if 0px padding and margin, if not also get that values and subtract from height_of_open_space before applying to img height

It is a bit hard to tell without seeing any of your markup, but it should be feasable with pure css. I set up a very basic example to demonstrate:
http://codepen.io/anon/pen/XbGJJO
HTML:
<div class='top'>
top navbar
</div>
<div class='content'>
<p> some content </p>
</div>
<div class='bottom'>
bottom navbar
</div>
CSS:
.top, .bottom {
height: 40px;
background: red;
position: fixed;
width: 100%;
}
.top {
top: 0;
}
.bottom {
bottom: 0;
}
.content {
margin: 40px 0;
min-height: calc(100vh - 80px);
background: green; /* background goes here */
}
The trick lies in the following line:
min-height: calc(100vh - 80px);
This tells your content to at least take up 100% of the vertical height, minus the height of the top and bottom bar. Let me know if you want me to explain further.

How to fill the browser window with a canvas element without creating scroll bars?

I have a problem to get my window size, I try this code:
Javascript
var game;
function game() {
this.canvas = document.getElementById('canvas');
this.canvasWidth = window.innerWidth;
this.canvasHeight = window.innerHeight;
this.initCanvas = function() {
this.canvas.style.width = this.canvasWidth + "px";
this.canvas.style.height = this.canvasHeight + "px";
}
this.run = function() {
this.initCanvas();
}
}
game = new game();
game.run();
I also have
CSS
html, body {
padding: 0;
margin: 0;
}
I only have a canvas in my body.
Problem is, that I have a vertical and horizontal scroll bar. This means the size of canvas is too large. How to make it of the window size without the scroll bars appearing?

It looks like you're just trying to make your canvas have a width and height of 100%. You can do this with just css:
HTML
<body>
<canvas id="canvas"></canvas>
</body>
CSS
body, html {
height: 100%;
width: 100%;
margin: 0px;
}
canvas {
background: #ffcccc;
height: 100%;
width: 100%;
display: block;
}
​
Demo
Or if you want to use your code but get rid of the scroll bars on the window, you need to specify block on the canvas tag.
CSS
canvas {
display: block;
}
Demo

When you use CSS to style your <canvas> element it will get scaled instead of sized. Be sure to set the .width and .height properties on the canvas element instead (ie canvas.width not canvas.style.width).
jsfiddle example
In the example the first canvas element is scaled correctly, the second (using CSS) is not scaled properly. This has to do with a default canvas element size (300x150) that CSS scales.
To prevent getting scrollbars when setting the <canvas> to the full window width/height set the body to overflow:hidden; as used in the jsfiddle above.

Create circle that is proportionately sized to window

I am attempting to create a circle with a height of 10% the browser window. If I also make the width 10%, and you scale the browser, you get a misshapen or squished circle. I want to try to create the width of the circle with jquery to change in proportion with the height. so if 10% converts to 200px height, the width would be changed to 200px. I have tried a few solutions, but keep getting a width of 0px in return.

assuming you are using jQuery and your circle is an HTML element you could do this:
var $window = $(window),
$el = $('#someElement');
$window.on('resize', function () {
var size = $window.height() * 0.1;
$el.width(size).height(size);
});

Get the width and the height of the window and then simply check which one of them is the smallest. Get 10% of that value and use this as the circle's radius.

Little experiment using a transparent square image which is the direct child of <body>:
http://jsfiddle.net/2S3xU/3/
<html><body><img src="transparent-square.gif">
img {
border-radius: 99999px;
position: absolute;
top: 0; left: 0;
height: 100%; /* width will follow height to keep image undistorted*/
max-width: 100%;
max-height: 10%;
}​
/* Opera fix*/
body, html {
width: 100%;
height: 100%;
}