Develop Reference

Central div with margin, and ability to scroll out in all directions (using view width and view height)

So I want to have a central div that is full screen, and to make the width and height of the body 150 vw and vh, with a margin of 50% so when you load the page it holds the div central, but you can scroll up, down, left, right, outside of this central div a little bit.
If you do the div 100vw, 100vh, and then the body 200vw, 200vh, it only enables scrolling to the right and downwards.
This is my understanding of how to get towards what I'm trying to do:
HTML:
<div>
centered and full screen div?
</div>
</body>
CSS:
body{
width:150vw;
margin-left:50vw;
height:150vh;
margin-top:50vh;
}
div{
width: 100vw;
height: 100vh;
border: solid;
}
JAVA:
window.scrollTo(50 + 'vw', 50 + 'vh');
https://jsfiddle.net/dsLnzyxw/3/
But this doesnt work as the javascript doesn't accept vw in the scrollTo function.. but just to give a better idea of what I'm trying to do.
Also understand I might be going around on crazy route trying to achieve something that could be done quite simple in css?
How do I achieve this?
Thanks !

In order to get units relative to the viewport width and viewport height (vw and vh) you could do simple calculations:
window.scrollTo(0.5 * window.innerWidth, 0.5*window.innerHeight);
which would set the scroll position to 50% of the window width and 50% of the window height. window.innerWidth returns the width of the window, and this is multiplied by 50% to get 50% of the width of the window in pixels.
The same goes for height. Setting the scroll position is not possible without JavaScript unfortunately.

ReactJS: Resizing a canvas inside a flexbox

I'm struggling with trying to get a canvas to be dynamically resized to fill the bottom part of a web page when the browser resizes. The canvas will be resized correctly when increasing the browser window size, but will remain the same size when decreasing the browser window size.
How can I get the canvas to shrink in size along with the browser window?
Here's where I'm at now: https://codesandbox.io/s/thirsty-pare-vk4yb

It's happening because you set the canvas's height on resize so it can be bigger, but once the canvas' height has been set, its parent can't be shorter.
You can get rid of sets the canvas' height (I'm following your example, I'm not sure how it will affect on the real case) and use a similar approach as <Container /> and <FloorPlanWrapper /> - set the parent display: flex and the child flex-grow: 1.
Like this:
const FloorPlanWrapper = styled.div`
flex-grow: 1;
background-color: blue;
display: flex;
flex-direction: column;
`;
const StyledCanvas = styled.canvas`
background-color: yellow;
display: block;
flex-grow: 1;
`;
https://codesandbox.io/s/boring-dubinsky-0rzyi
Notice: Even though flexbox can take care of the canvas size it can't take care about the its resolution. In order to do so, you need to listen to window resize and update its resolution (canvas.width = canvas.height * (canvas.clientWidth / canvas.clientHeight);) and then re-render it.
https://codesandbox.io/s/boring-dubinsky-0rzyi
Thanks to https://bob1german.com/2015/03/09/stretching-the-html-5-canvas-fixing-aspect-ratio-problems/ for this formula

Set width of a div in respect to height

I have a div #slideshow with images of 2:1 aspect ratio. So, set height of image I am using jQuery:
Note: The Slideshow Div is 100% wide with respect to browser window. If user makes the browser window, smaller - it is going to be smaller.
slideWidth();
function slideWidth(){
var width = $("#slideshow").css("width");
var height = (parseInt(width.substr(0,width.length-2)) /3);
$("#slideshow").css("height",height+"px");
}
And, to make the width change dynamically, I use setTimeout:
setInterval(slideWidth,1000);
This is actually working as I want. But I think I am heavily giving high impact on the website by refreshing the function slidewidth every second.
Is this achievable through CSS3? Or with jQuery/JS with less Website Impact?
Thank you. Feel free to comment with new ways/ideas.

There's a css-only approach using pseudo elements and padding:
div {
width: 100%;
position: relative;
background: red;
}
div:before {
display: block;
content: "";
padding-top: 50%;
}
The combination of the pseudo padding-top can be used to vary between aspect ratios.
In this case, the 50% padding is equivalent to aspect ratio of 2:1
Working Fiddle Example

You should be using jquerys .resize(); This adds an event listener waiting for the container to resize.
Ej:
$(window).resize(function(){
//do your logic here
});
Jquery resize

div height occupy remaining browser window with a non-fixed overall height

I can get Alvaro's fiddle: http://jsfiddle.net/S8g4E/955/ to work the way I want it to only for width but not height ... my lower component canvas is very large (5000px square) and I want it to scroll in both directions, but have the "viewport" grow to the full size of its containing lower window ...
If you look at my fiddle: http://jsfiddle.net/tconway556/4LCj2/
<div id="container">
<div id="up">Text<br />Text<br />Text<br /></div>
<div id="down" style="overflow:scroll; width: 100%;">
<canvas width="5000px" height="5000px">
</canvas>
</div>
</div>
#container { width: 100%; height: 300px; border:1px solid red;}
#up { background: green; height:80px}
#down { background:pink; height: calc(100% - 80px); }
the width is working as I want. but not the height. I can only hard code the height of the overall container to a fixed value.
If you resize the browser with my fiddle in it, the width of canvas viewport adapts to the containing window, but the height remains fixed. This makes sense since I fixed it at 300px .. but ...
If I replace the fixed 300px with 100% in the #container, the height grows to 5000px + .... what I wanted was the same behavior we see with width. ie. When you resize the outer browser window both width and height of the viewport adapt to the browser boundaries ...
Does anyone have a solution for this ?

Im just replying from a phone so can't look at your fiddle and resize etc but if I understand your problem correctly you could try removing the height value and instead using padding-bottom: with a percentage value.
You'll have to play around with the values for padding-bottom to see what works for your needs but this will allow the height to adjust dynamically and should scale with your resizing window. Its a bit of a trial a d error one but ive used it before to solve a similar issue

HTML5 How to make canvas not stretch page?

I have learned how to work with Canvases in HTML5, and I have a question.
Is there a way to make a canvas not stretch the other elements on the page? For example I have some text, if I put a canvas of 500px wide, the text is sent to the right to make space for the canvas, is there a way to put the canvas under the text or simply make it not stretch the other elements in the page, or is there simply a technique used to appropriately position canvases in a way so that it is where you want it to be exactly?
Thanks for your help.

Just treat the canvas as you would treat a div. The way you size/position a div, you can do the same with canvas. If you are having a specific problem adjusting the canvas, post the code you are using.
Edit : Also, be careful if you are setting canvas height/width with CSS as it only changes the element size, not the drawing surface size. To make sure both the element and drawing surface size changes, use the width and height attribute.

You should include the width and height attributes in the canvas element.
canvas.width = 600;
canvas.height = 600;
If you want to fit to screen automatic see question below
Resize HTML5 canvas to fit window

Use css-style z-index to make your text above canvas.
Sample css:
#canvas_id
{
position:absolute;
width: 100px;
height: 100px;
top: 100px;
left: 100px;
z-index:-1;
}
#text_div
{
position:absolute;
width: 100px;
height: 100px;
top: 100px;
left: 100px;
z-index:0;
}

A canvas is a flow element. You can position it exactly as you do with other flow elements, for example a div. It has default dimensions (300 x 300) but otherwise behaves mostly like a div.
To go on the next line, you may do this :
aaa
<br>
<canvas id=a></canvas>
There are so many possibilities with CSS (the same than with all flow elements) that it'd be hard to list them.