css - How to make Canvas take 100% of remaining space? -

Similarly, similar to 100% width or both. I want canvas to take 100% width and 100% height:

()

Markup:

  & lt; Div id = "canvascontainer" & gt; & Lt; Canvas id = "myCanvas" & gt; & Lt; / Canvas & gt; & Lt; / Div & gt;   
  CSS :  
  html {width: 100%; Height: 100%; Body {width: 100%; Height: 100%; Margin: 0; } #canvasContainer {width: 100%; Height: 100%; Background color: green; } #miconvas {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.wind, canvas.high); Ctx.stroke (); Ctx.lineWidth = 1; Ctx.beginPath (); Ctx.moveTo (canvas.wind, 0); Ctx.lineTo (0, canvas.high); Ctx.stroke ();   
   not    
   
 If you delete  canvas  then it works fine:  
   
 downwards to that So I do not  canvas .   
 
 
 resize a canvas element  
 If you use the CSS to the canvas If you spread, you will spread to the poor canvas which will have a default size of 300x150 pixels on the entire screen - imagine that you had an image of that size and that you did it - would look very bad.  
 Canvas content can not be extended using CSS (it acts as an image). You need to explicitly set the size of the canvas  pixel .  
 This means that you will need to get the size of the canvas and set it as a pixel value on the canvas:  
 First of all, to get rid of scroll bars Etc. for Adjust CSS to your:  
  body, html {width: 100%; Height: 100%; Margin: 0; Padding: 0; Hidden flurry; }   
 Modify this rule now:  
  # myCanvas {background-color: green; Status: fixed; Left: 0; Top: 0; }   
 Now reduce your markup only (if you want to cover the entire canvas you do not need a container other than the window):  < Pre>  & lt; Canvas id = "myCanvas" & gt; & Lt; / Canvas & gt;   
 Now we can calculate the size:  
  var canvas; Window.onload = window.onresize = function () {canvas = document. GetElementById ('myCanvas'); Canvas.width = window.innerWidth; Canvas.heat = window.white; }   
 And so on.  
   (Resize window to see).