How to center canvas in html5

Question

I ve been searching for a solution for a while now  but haven t found anything  Maybe it s just my search terms  Well  I m trying to make the canvas center according to the size of the browser window  The canvas is 800x600  And if the window gets below 800x600  it should resize as well but that s not very important at the moment

User · Answer

Add text-align  center  to the parent tag of  lt canvas gt   That s it   Example    lt div style  text-align  center  gt       lt canvas width  300  height  300  gt           lt  --your canvas code -- gt       lt  canvas gt   lt  div gt

User · Answer

You can give your canvas the ff CSS properties    myCanvas       display  block      margin  0 auto

User · Answer

Just center the div in HTML      test        width  100px       height 100px       margin  0px auto       border  1px solid red          lt div id  test  gt      lt canvas width  100  height  100  gt  lt  canvas gt   lt  div gt    Just change the height and width to whatever and you ve got a centered div  http   jsfiddle net BVghc 2

User · Answer

To center the canvas element horizontally  you must specify it as a block level and leave its left and right margin properties to the browser   canvas      margin-right  auto      margin-left  auto      display  block      If you wanted to center it vertically  the canvas element needs to be absolutely positioned   canvas      position  absolute      top  50       transform  translate 0  -50                      If you wanted to center it horizontally and vertically  do   canvas      position  absolute      top  50       left  50       transform  translate -50   -50                       For more info visit  https   www w3 org Style Examples 007 center en html

User · Answer

Using grid   x000D   x000D  const canvas   document querySelector  canvas     const ctx   canvas getContext  2d     ctx fillStyle     FF0000   ctx fillRect 0  0  canvas width  canvas height   x000D  body  html       height  100       width  100       margin  0      padding  0      background-color  black     body       display  grid      grid-template-rows  auto      justify-items  center      align-items  center     canvas     height  80vh     width  80vw     display  block    x000D   lt html gt     lt body gt           lt canvas gt  lt  canvas gt     lt  body gt   lt  html gt  x000D   x000D   x000D

User · Answer

Use this code    lt  DOCTYPE html gt   lt html gt   lt head gt   lt style gt   text-center      text-align center      margin-left auto      margin-right auto     lt  style gt   lt  head gt   lt body gt    lt div class  text-center  gt   lt canvas id  myCanvas  width  200  height  100  style  border 1px solid  000000   gt  Your browser does not support the HTML5 canvas tag   lt  canvas gt   lt  div gt    lt  body gt   lt  html gt

User · Answer

The above answers only work if your canvas is the same width as the container   This works regardless    x000D   x000D   container   x000D    width  100px  x000D    height 100px  x000D    border  1px solid red  x000D     x000D     x000D    margin  0px auto  x000D    text-align  center  x000D    x000D   x000D   canvas   x000D    border  1px solid blue  x000D    width  50px  x000D    height  100px  x000D     x000D    x000D   lt div id  container  gt  x000D     lt canvas id  canvas  width  100  height  100  gt  lt  canvas gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

I have had the same problem  as I have pictures with many different widths which I load only with height info  Setting a width allows the browser to stretch and squeeze the picture  I solve the problem by having the text line just before the image tag line centred  also getting rid of float  left    I would have liked the text to be left aligned  but this is a minor inconvienence  that I can tolerate

User · Answer

Give the canvas the following css style properties   canvas       padding-left  0      padding-right  0      margin-left  auto      margin-right  auto      display  block      width  800px        Edit  Since this answer is quite popular  let me add a little bit more details   The above properties will horizontally center the canvas  div or whatever other node you have relative to it s parent  There is no need to change the top or bottom margins and paddings  You specify a width and let the browser fill the remaining space with the auto margins   However  if you want to type less  you could use whatever css shorthand properties you wish  such as  canvas       padding  0      margin  auto      display  block      width  800px      Centering the canvas vertically requires a different approach however  You need to use absolute positioning  and specify both the width and the height  Then set the left  right  top and bottom properties to 0 and let the browser fill the remaining space with the auto margins   canvas       padding  0      margin  auto      display  block      width  800px      height  600px      position  absolute      top  0      bottom  0      left  0      right  0      The canvas will center itself based on the first parent element that has position set to relative or absolute  or the body if none is found   Another approach would be to use display  flex  that is available in IE11  Also  make sure you use a recent doctype such as xhtml or html 5

[html] How to center canvas in html5

Examples related to html

Examples related to canvas

Examples related to css

Examples related to resize