Resize HTML5 canvas to fit window

Question

How can I automatically scale the HTML5  lt canvas gt  element to fit the page   For example  I can get a  lt div gt  to scale by setting the height and width properties to 100   but a  lt canvas gt  won t scale  will it

User · Answer

Setting the canvas coordinate space width and height based on the browser client's dimensions requires you to resize and redraw whenever the browser is resized.

A less convoluted solution is to maintain the drawable dimensions in Javascript variables, but set the canvas dimensions based on the screen.width, screen.height dimensions. Use CSS to fit:

#containingDiv { 
  overflow: hidden;
}
#myCanvas {
  position: absolute; 
  top: 0px;
  left: 0px;
}

The browser window generally won't ever be larger than the screen itself (except where the screen resolution is misreported, as it could be with non-matching dual monitors), so the background won't show and pixel proportions won't vary. The canvas pixels will be directly proportional to the screen resolution unless you use CSS to scale the canvas.

User · Answer

If your div completely filled the webpage then you can fill up that div and so have a canvas that fills up the div   You may find this interesting  as you may need to use a css to use percentage  but  it depends on which browser you are using  and how much it is in agreement with the spec  http   www whatwg org specs web-apps current-work multipage the-canvas-element html the-canvas-element     The intrinsic dimensions of the canvas   element equal the size of the   coordinate space  with the numbers   interpreted in CSS pixels  However    the element can be sized arbitrarily   by a style sheet  During rendering    the image is scaled to fit this layout   size    You may need to get the offsetWidth and height of the div  or get the window height width and set that as the pixel value

User · Answer

Unless you want the canvas to upscale your image data automatically  that s what James Black s answer talks about  but it won t look pretty   you have to resize it yourself and redraw the image  Centering a canvas

User · Answer

The following solution worked for me the best   Since I m relatively new to coding  I like to have visual confirmation that something is working the way I expect it to   I found it at the following site  http   htmlcheats com html resize-the-html5-canvas-dyamically   Here s the code    lt  DOCTYPE html gt    lt head gt       lt meta charset  utf-8  gt       lt title gt Resize HTML5 canvas dynamically   www htmlcheats com lt  title gt       lt style gt      html  body         width  100         height  100         margin  0px        border  0        overflow  hidden      Disable scrollbars          display  block      No floating content on sides               lt  style gt   lt  head gt    lt body gt       lt canvas id  c  style  position absolute  left 0px  top 0px   gt       lt  canvas gt        lt script gt       function             var            Obtain a reference to the canvas element using its id          htmlCanvas   document getElementById  c               Obtain a graphics context on the canvas element for drawing          context   htmlCanvas getContext  2d               Start listening to resize events and draw canvas         initialize            function initialize                   Register an event listener to call the resizeCanvas   function                each time the window is resized             window addEventListener  resize   resizeCanvas  false                 Draw canvas border for the first time             resizeCanvas                          Display custom canvas  In this case it s a blue  5 pixel             border that resizes along with the browser window          function redraw                context strokeStyle    blue              context lineWidth    5              context strokeRect 0  0  window innerWidth  window innerHeight                         Runs each time the DOM window resize event fires             Resets the canvas dimensions to match window             then draws the new borders accordingly          function resizeCanvas                 htmlCanvas width   window innerWidth              htmlCanvas height   window innerHeight              redraw                              lt  script gt   lt  body gt    lt  html gt    The blue border shows you the edge of the resizing canvas  and is always along the edge of the window  visible on all 4 sides  which was NOT the case for some of the other above answers   Hope it helps

User · Answer

CSS  body   margin  0     canvas   display  block       JavaScript  window addEventListener  load   function         var canvas   document createElement  canvas    document body appendChild canvas       var context   canvas getContext  2d         function draw                 context clearRect 0  0  canvas width  canvas height           context beginPath            context moveTo 0  0   context lineTo canvas width  canvas height            context moveTo canvas width  0   context lineTo 0  canvas height            context stroke              function resize                 canvas width   window innerWidth          canvas height   window innerHeight          draw              window addEventListener  resize   resize       resize

User · Answer

function resize          var canvas   document getElementById  game        var canvasRatio   canvas height   canvas width      var windowRatio   window innerHeight   window innerWidth      var width      var height       if  windowRatio  lt  canvasRatio            height   window innerHeight          width   height   canvasRatio        else           width   window innerWidth          height   width   canvasRatio             canvas style width   width    px       canvas style height   height    px       window addEventListener  resize   resize  false

User · Answer

function             get viewport size     getViewportSize   function             return               height  window innerHeight              width   window innerWidth                           update canvas size     updateSizes   function             var viewportSize   getViewportSize                myCanvas   width viewportSize width  height viewportSize height               myCanvas   attr  width   viewportSize width  attr  height   viewportSize height                  run on load     updateSizes            handle window resizing       window  on  resize   function             updateSizes

User · Answer

This worked for me  Pseudocode     screen width and height scr    w document documentElement clientWidth h document documentElement clientHeight  canvas width   scr w canvas height   scr h  Also  like devyn said  you can replace  quot document documentElement client quot  with  quot inner quot  for both the width and height    document documentElement client  Width   inner  Width   document documentElement client  Height   inner  Height  and it still works

User · Answer

I believe I have found an elegant solution to this   JavaScript     important  for alignment  you should make things    relative to the canvas  current width height      function draw       var ctx    a canvas context     ctx canvas width    window innerWidth    ctx canvas height   window innerHeight         drawing code        CSS  html  body     width   100     height  100     margin  0      Hasn t had any large negative performance impact for me  so far

User · Answer

I m using sketch js so after I run the init command for the canvas i change the width and height with jquery  It bases the dimensions on the parent element          DrawCanvas   sketch   attr  height      DrawCanvas   parent   height    attr  width      DrawCanvas   parent   width

User · Answer

Basically what you have to do is to bind the onresize event to your body  once you catch the event you just need to resize the canvas using window innerWidth and   window innerHeight    lt  DOCTYPE html PUBLIC  -  W3C  DTD XHTML 1 0 Transitional  EN   http   www w3 org TR xhtml1 DTD xhtml1-transitional dtd  gt    lt html xmlns  http   www w3 org 1999 xhtml  gt   lt head gt       lt title gt Canvas Resize lt  title gt        lt script type  text javascript  gt          function resize canvas                canvas   document getElementById  canvas                if  canvas width   lt  window innerWidth                                canvas width    window innerWidth                             if  canvas height  lt  window innerHeight                                canvas height   window innerHeight                               lt  script gt   lt  head gt    lt body onresize  resize canvas    gt           lt canvas id  canvas  gt Your browser doesn t support canvas lt  canvas gt   lt  body gt   lt  html gt

User · Answer

Using jQuery you can track the window resize and change the width of your canvas using jQuery as well    Something like that   x000D   x000D     window   resize function     x000D         myCanvas   width    window   width    x000D      x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt canvas id  myCanvas  width  200  height  100  style  border 1px solid  000000   gt  x000D   x000D   x000D

User · Answer

Set initial size  const canvas   document getElementById  canvas     canvas width    window innerWidth  canvas height   window innerHeight   Update size on window resize  function windowResize       canvas width    window innerWidth    canvas height   window innerHeight      window addEventListener  resize   windowResize

User · Answer

If you re interested in preserving aspect ratios and doing so in pure CSS  given the aspect ratio  you can do something like below  The key is the padding-bottom on the   content element that sizes the container element  This is sized relative to its parent s width  which is 100  by default  The ratio specified here has to match up with the ratio of the sizes on the canvas element    x000D   x000D     Javascript x000D   x000D  var canvas   document querySelector  canvas    x000D      context   canvas getContext  2d    x000D   x000D  context fillStyle     ff0000   x000D  context fillRect 500  200  200  200   x000D   x000D  context fillStyle     000000   x000D  context font    30px serif   x000D  context fillText  This is some text that should not be distorted  just scaled   10  40   x000D    CSS   x000D   x000D   container   x000D    position  relative   x000D    background-color  green  x000D    x000D   x000D   container  after   x000D    content       x000D    display  block  x000D    padding  0 0 50   x000D    x000D   x000D   wrapper   x000D    position  absolute  x000D    top  0  x000D    right  0  x000D    left  0  x000D    bottom  0  x000D    x000D   x000D  canvas   x000D    width  100   x000D    height  100   x000D    x000D   lt  -- HTML -- gt  x000D   x000D   lt div class container gt  x000D     lt div class wrapper gt  x000D       lt canvas width 1200 height 600 gt  lt  canvas gt    x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Here s a tiny  complete Code Snippet that combines all the answers  Press   quot Run Code Snippet quot  then press  quot Full Page quot  and resize the window to see it in action   x000D   x000D  function refresh referenceWidth  referenceHeight  drawFunction      const myCanvas   document getElementById  myCanvas      myCanvas width   myCanvas clientWidth    myCanvas height   myCanvas clientHeight     const ratio   Math min      myCanvas width   referenceWidth      myCanvas height   referenceHeight        const ctx   myCanvas getContext  2d      ctx scale ratio  ratio      drawFunction ctx  ratio     window requestAnimationFrame      gt        refresh referenceWidth  referenceHeight  drawFunction              100  100 is the  reference  size  Choose whatever you want  refresh 100  100   ctx  ratio    gt        Custom drawing code  Draw whatever you want here    const referenceLineWidth   1    ctx lineWidth   referenceLineWidth   ratio    ctx beginPath      ctx strokeStyle    blue     ctx arc 50  50  49  0  2   Math PI     ctx stroke        x000D  div     width  90vw    height  90vh     canvas     width  100     height  100     object-fit  contain    x000D   lt div gt     lt canvas id  myCanvas  gt  lt  canvas gt   lt  div gt  x000D   x000D   x000D   This snippet uses canvas clientWidth and canvas clientHeight rather than window innerWidth and window innerHeight to make the snippet run inside a complex layout correctly  However  it works for full window too if you just put it in a div that uses full window  It s more flexible this way  The snippet uses the newish window requestAnimationFrame to repeatedly resize the canvas every frame  If you can t use this  use setTimeout instead  Also  this is  inefficient  To make it more efficient  store the clientWidth and clientHeight and only recalculate and redraw when clientWidth and clientHeight change  The idea of a  quot reference quot  resolution lets you write all of your draw commands using one resolution    and it will automatically adjust to the client size without you having to change the drawing code  The snippet is self explanatory  but if you prefer it explained in English  https   medium com  doomgoober resizing-canvas-vector-graphics-without-aliasing-7a1f9e684e4d

User · Answer

A pure CSS approach adding to solution of  jerseyboy above  Works in Firefox  tested in v29   Chrome  tested in v34  and Internet Explorer  tested in v11     lt  DOCTYPE html gt   lt html gt       lt head gt       lt style gt          html          body               width  100               height  100               margin  0                    canvas               background-color   ccc              display  block              position  absolute              top  0              left  0              right  0              bottom  0              width  100               height  100                  lt  style gt   lt  head gt   lt body gt       lt canvas id  canvas  width  500  height  500  gt  lt  canvas gt       lt script gt          var canvas   document getElementById  canvas            if  canvas getContext                var ctx   canvas getContext  2d                ctx fillRect 25 25 100 100               ctx clearRect 45 45 60 60               ctx strokeRect 50 50 50 50                  lt  script gt   lt  body gt   lt  html gt    Link to the example  http   temporaer net open so 140502 canvas-fit-to-window html  But take care  as  jerseyboy states in his comment      Rescaling canvas with CSS is troublesome  At least on Chrome and   Safari  mouse touch event positions will not correspond 1 1 with   canvas pixel positions  and you ll have to transform the coordinate   systems

User · Answer

I think this is what should we exactly do  http   www html5rocks com en tutorials casestudies gopherwoord-studios-resizing-html5-games   function resizeGame         var gameArea   document getElementById  gameArea        var widthToHeight   4   3      var newWidth   window innerWidth      var newHeight   window innerHeight      var newWidthToHeight   newWidth   newHeight       if  newWidthToHeight  gt  widthToHeight            newWidth   newHeight   widthToHeight          gameArea style height   newHeight    px           gameArea style width   newWidth    px         else           newHeight   newWidth   widthToHeight          gameArea style width   newWidth    px           gameArea style height   newHeight    px              gameArea style marginTop    -newHeight   2     px       gameArea style marginLeft    -newWidth   2     px        var gameCanvas   document getElementById  gameCanvas        gameCanvas width   newWidth      gameCanvas height   newHeight     window addEventListener  resize   resizeGame  false   window addEventListener  orientationchange   resizeGame  false

[javascript] Resize HTML5 canvas to fit window

Examples related to javascript

Examples related to html

Examples related to html5-canvas