All geek questions in one place

How to make Canvas take 100% of the remaining space?

Like I want the div accept 100% height , 100% width, or both. I want the Canvas accept 100% width and 100% height:

( JsFiddle link for your reading )

Markup:

 <div id="canvasContainer"> <canvas id="myCanvas"></canvas> </div>

CSS

 html { width: 100%; height: 100%; } body { width: 100%; height: 100%; margin: 0; } #canvasContainer { width: 100%; height: 100%; background-color: green; } #myCanvas { width: 100%; height: 100%; }

Javascript

 var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); ctx.lineWidth = 1; ctx.beginPath(); ctx.moveTo(0, 0); ctx.lineTo(canvas.width, canvas.height); ctx.stroke(); ctx.lineWidth = 1; ctx.beginPath(); ctx.moveTo(canvas.width, 0); ctx.lineTo(0, canvas.height); ctx.stroke();

Which leads to something not accepting 100% of the browser window:

enter image description here

It works fine if you uninstall Canvas :

enter image description here

The downside of this, then I do not have Canvas .

+6
source share
4 answers

Determining the size of a canvas element

If you stretch the canvas using CSS, you stretch the poor canvas, the default size of which is 300x150 pixels — imagine that you have an image of this size and that you did the same — it will look pretty bad.

The contents of the canvas cannot be stretched using CSS (it acts like an image in this way). You need to explicitly specify the pixel size of the canvas.

This means that you will need to get the size of the parent container and set it as the pixel value on the canvas:

First of all, to get rid of scrollbars, etc., namely CSS:

 body, html { width: 100%; height: 100%; margin: 0; padding:0; overflow:hidden; }

Now change this rule:

 #myCanvas { background-color: green; position:fixed; left:0; top:0; }

Now reduce your markup to this (if you want the canvas to cover the entire sceeen, you don't need a container other than a window):

 <canvas id="myCanvas"></canvas>

Now we can calculate the size:

 var canvas; window.onload = window.onresize = function() { canvas = document.getElementById('myCanvas'); canvas.width = window.innerWidth; canvas.height = window.innerHeight; }

What is it.

Working demo (resize window to see).

+5
source

you can set the absolute value with 0:

 canvas { position: absolute; top: 0; left: 0; right: 0; bottom: 0; }

Then just look at what element it is in, add position: relative to process the block that it spans. Probably in your case: #canvasContainer , but possibly body if it's just for one full-screen mode.

+1
source

I had a similar problem in the past. My solution for it was to install overflow: hidden on html

Fiddle here

He gets rid of this a little below, which, if you check the pages, is a little more, not the height of the body. If anyone has an idea of ​​what it is, I'm all ears.

+1
source

Modified some examples here to make mine work.

JSFiddle: http://jsfiddle.net/FT3pP/1/

JS:

 $( document ).ready( function () { SizeBackground(); } ); function SizeBackground(){ var canvas = $( "canvas#background" )[0]; fitToContainer( canvas ); } function fitToContainer( canvas ) { canvas.width = canvas.parentElement.clientWidth; canvas.height = canvas.parentElement.clientHeight; }

CSS

 body, html { margin: 0; width: 100%; height: 100%; padding: 0; } div .container { width: 100%; height: 100%; } div#pallette { position: absolute; top: 1px; bottom: 1px; left: 1px; right: 1px; } canvas#background { position: fixed; left: 0; top: 0; background: black; }

HTML:

 <body> <div id="pallette"> <div class="container"> <canvas id="background"></canvas> <canvas id="middleground"></canvas> <canvas id="foreground"></canvas> </div> <div id="stats"></div> <div id="chat"></div> </div> </body>

Only includes:

 <!-- Styles Sheets --> <link href="Scripts/App.min.css" rel="stylesheet" /> <!-- Javascript --> <script src="Scripts/jquery-2.1.0.min.js"></script> <script src="Scripts/jquery-ui-1.10.4.min.js"></script> <script src="Scripts/app.js"></script>
+1
source

Source: https://habr.com/ru/post/947844/

More articles:


All Articles