HTML5 Canvas 100 Width Height of Viewport

Question

I am trying to create a canvas element that takes up 100  of the width and height of the viewport    You can see in my example here that is occurring  however it is adding scroll bars in both Chrome and FireFox   How can I prevent the extra scroll bars and just provide exactly the width and height of the window to be the size of the canvas

User · Answer

http   jsfiddle net mqFdk 10    lt  DOCTYPE html gt   lt html gt   lt head gt       lt title gt aj lt  title gt   lt  head gt   lt body gt        lt canvas id  c  gt  lt  canvas gt    lt  body gt   lt  html gt    with CSS  body           margin  0          padding  0         c         position  absolute        width  100         height  100         overflow  hidden

User · Answer

In order to make the canvas full screen width and height always  meaning even when the browser is resized  you need to run your draw loop within a function that resizes the canvas to the window innerHeight and window innerWidth   Example  http   jsfiddle net jaredwilli qFuDr   HTML   lt canvas id  canvas  gt  lt  canvas gt    JavaScript   function         var canvas   document getElementById  canvas                context   canvas getContext  2d            resize the canvas to fill browser window dynamically     window addEventListener  resize   resizeCanvas  false        function resizeCanvas                 canvas width   window innerWidth              canvas height   window innerHeight                                  Your drawings need to be inside this function otherwise they will be reset when                 you resize the browser window and the canvas goes will be cleared                              drawStuff               resizeCanvas         function drawStuff                    do your drawing stuff here               CSS      margin 0  padding 0       to remove the top and left whitespace     html  body   width 100   height 100        just to be sure these are full screen    canvas   display block       To remove the scrollbars      That is how you properly make the canvas full width and height of the browser  You just have to put all the code for drawing to the canvas in the drawStuff   function

User · Answer

I ll answer the more general question of how to have a canvas dynamically adapt in size upon window resize  The accepted answer appropriately handles the case where width and height are both supposed to be 100   which is what was asked for  but which also will change the aspect ratio of the canvas  Many users will want the canvas to resize on window resize  but while keeping the aspect ratio untouched  It s not the exact question  but it  fits in   just putting the question into a slightly more general context   The window will have some aspect ratio  width   height   and so will the canvas object  How you want these two aspect ratios to relate to each other is one thing you ll have to be clear about  there is no  one size fits all  answer to that question - I ll go through some common cases of what you might want   Most important thing you have to be clear about  the html canvas object has a width attribute and a height attribute  and then  the css of the same object also has a width and a height attribute  Those two widths and heights are different  both are useful for different things   Changing the width and height attributes is one method with which you can always change the size of your canvas  but then you ll have to repaint everything  which will take time and is not always necessary  because some amount of size change you can accomplish via the css attributes  in which case you do not redraw the canvas   I see 4 cases of what you might want to happen on window resize  all starting with a full screen canvas   1  you want the width to remain 100   and you want the aspect ratio to stay as it was  In that case  you do not need to redraw the canvas  you don t even need a window resize handler  All you need is    ctx canvas  css  width    100       where ctx is your canvas context  fiddle  resizeByWidth  2  you want width and height to both stay 100   and you want the resulting change in aspect ratio to have the effect of a stretched-out image  Now  you still don t need to redraw the canvas  but you need a window resize handler  In the handler  you do    ctx canvas  css  height   window innerHeight     fiddle  messWithAspectratio  3  you want width and height to both stay 100   but the answer to the change in aspect ratio is something different from stretching the image  Then you need to redraw  and do it the way that is outlined in the accepted answer   fiddle  redraw  4  you want the width and height to be 100  on page load  but stay constant thereafter  no reaction to window resize   fiddle  fixed  All fiddles have identical code  except for line 63 where the mode is set  You can also copy the fiddle code to run on your local machine  in which case you can select the mode via a querystring argument  as  mode redraw

User · Answer

You can try viewport units  CSS3    canvas      height  100vh     width  100vw     display  block

User · Answer

Expanding upon      s answer   Style the canvas to fill the body  When rendering to the canvas take its size into account   http   jsfiddle net mqFdk 356    lt  DOCTYPE html gt   lt html gt   lt head gt       lt title gt aj lt  title gt   lt  head gt   lt body gt        lt canvas id  c  gt  lt  canvas gt    lt  body gt   lt  html gt    CSS   body           margin  0          padding  0         c         position  absolute        width  100         height  100         overflow  hidden        Javascript    function redraw         var cc   c getContext  2d        c width   c clientWidth      c height   c clientHeight      cc scale c width  c height           Draw a circle filling the canvas      cc beginPath        cc arc 0 5  0 5   5  0  2 Math PI       cc fill          update on any window size change  window addEventListener  resize   redraw       first draw redraw

User · Answer

I was looking to find the answer to this question too  but the accepted answer was breaking for me  Apparently using window innerWidth isn t portable  It does work in some browsers  but I noticed Firefox didn t like it   Gregg Tavares posted a great resource here that addresses this issue directly  http   webglfundamentals org webgl lessons webgl-anti-patterns html  See anti-pattern   s 3 and 4    Using canvas clientWidth instead of window innerWidth seems to work nicely   Here s Gregg s suggested render loop   function resize       var width   gl canvas clientWidth    var height   gl canvas clientHeight    if  gl canvas width    width          gl canvas height    height         gl canvas width   width       gl canvas height   height       return true        return false     var needToRender   true      draw at least once function checkRender        if  resize      needToRender         needToRender   false       drawStuff            requestAnimationFrame checkRender     checkRender

User · Answer

For mobiles  it   s better to use it   canvas width   document documentElement clientWidth  canvas height   document documentElement clientHeight    because it will display incorrectly after changing the orientation The    viewport    will be increased when changing the orientation to portrait See full  example

[jquery] HTML5 Canvas 100% Width Height of Viewport?

Examples related to jquery

Examples related to html

Examples related to canvas

Examples related to viewport