Centering a canvas

Question

How do I markup a page with an HTML5 canvas such that the canvas   Takes up 80  of the width Has a corresponding pixel height and width which effectively define the ratio  and are proportionally maintained when the canvas is stretched to 80   Is centered both vertically and horizontally   You can assume that the canvas is the only thing on the page  but feel free to encapsulate it in divs if necessary

User · Answer

Given that canvas is nothing without JavaScript  use JavaScript too for sizing and positionning  you know  onresize  position absolute  etc

User · Answer

Resizing canvas using css is not a good idea  It should be done using Javascript  See the below function which does it  function setCanvas        var canvasNode   document getElementById  xCanvas        var pw   canvasNode parentNode clientWidth     var ph   canvasNode parentNode clientHeight      canvasNode height   pw   0 8    canvasNode height canvasNode width        canvasNode width   pw   0 8     canvasNode style top    ph-canvasNode height  2    px      canvasNode style left    pw-canvasNode width  2    px         demo here   http   jsfiddle net 9Rmwt 11 show

User · Answer

Same codes from Nickolay above  but tested on IE9 and chrome  and removed the extra rendering    window onload   window onresize   function        var canvas   document getElementById  canvas       var viewportWidth   window innerWidth     var viewportHeight   window innerHeight     var canvasWidth   viewportWidth   0 8     var canvasHeight   canvasWidth   2      canvas style position    absolute      canvas setAttribute  width   canvasWidth      canvas setAttribute  height   canvasHeight      canvas style top    viewportHeight - canvasHeight    2    px      canvas style left    viewportWidth - canvasWidth    2    px       HTML    lt body gt     lt canvas id  canvas  style  background   ffffff  gt       Canvas is not supported     lt  canvas gt   lt  body gt    The top and left offset only works when I add px

User · Answer

in order to center the canvas within the window   px  should be added to el style top and el style left    el style top    viewportHeight - canvasHeight    2   px   el style left    viewportWidth - canvasWidth    2   px

User · Answer

Tested only on Firefox    lt script gt  window onload   window onresize   function         var C   0 8            canvas width to viewport width ratio     var W TO H   2 1       canvas width to canvas height ratio     var el   document getElementById  a            For IE compatibility http   www google com search q get viewport size js     var viewportWidth   window innerWidth      var viewportHeight   window innerHeight       var canvasWidth   viewportWidth   C      var canvasHeight   canvasWidth   W TO H      el style position    fixed       el setAttribute  width   canvasWidth       el setAttribute  height   canvasHeight       el style top    viewportHeight - canvasHeight    2      el style left    viewportWidth - canvasWidth    2       window ctx   el getContext  2d        ctx clearRect 0 0 canvasWidth canvasHeight       ctx fillStyle    yellow       ctx moveTo 0  canvasHeight 2       ctx lineTo canvasWidth 2  0       ctx lineTo canvasWidth  canvasHeight 2       ctx lineTo canvasWidth 2  canvasHeight       ctx lineTo 0  canvasHeight 2       ctx fill      lt  script gt    lt body gt   lt canvas id  a  style  background  black  gt   lt  canvas gt   lt  body gt

User · Answer

Looking at the current answers I feel that one easy and clean fix is missing  Just in case someone passes by and looks for the right solution  I am quite successful with some simple CSS and javascript   Center canvas to middle of the screen or parent element  No wrapping   HTML    lt canvas id  canvas  width  400  height  300  gt No canvas support lt  canvas gt    CSS    canvas       position  absolute      top 0      bottom  0      left  0      right  0      margin auto      Javascript   window onload   window onresize   function         var canvas   document getElementById  canvas        canvas width   window innerWidth   0 8      canvas height   window innerHeight   0 8      Works like a charm - tested  firefox  chrome  fiddle  http   jsfiddle net djwave28 j6cffppa 3

User · Answer

As to the CSS suggestion    myCanvas     width  100    height  100       By the standard  CSS does not size the canvas coordinate system  it scales the content   In Chrome  the CSS mentioned will scale the canvas up or down to fit the browser s layout  In the typical case where the coordinate system is smaller than the browser s dimensions in pixels  this effectively lowers the resolution of your drawing  It most likely results in non-proportional drawing as well

User · Answer

Wrapping it with div should work  I tested it in Firefox  Chrome on Fedora 13  demo     content      width  95      height  95      margin  auto      myCanvas      width  100      height  100      border  1px solid black      And the canvas should be enclosed in  tag   lt div id  content  gt       lt canvas id  myCanvas  gt Your browser doesn t support canvas tag lt  canvas gt   lt  div gt    Let me know if it works  Cheers

User · Answer

Simple    lt body gt       lt div gt           lt div style  width  800px  height 500px  margin  50px auto   gt               lt canvas width  800  height  500  style  background  CCC  gt               Your browser does not support HTML5 Canvas               lt  canvas gt           lt  div gt       lt  div gt   lt  body gt

User · Answer

This will center the canvas horizontally    canvas-container      width  100      text-align center     canvas      display  inline      HTML    lt div id  canvas-container  gt      lt canvas gt Your browser doesn t support canvas lt  canvas gt   lt  div gt

User · Answer

easiest way  put the canvas into paragraph tags like this   x000D   x000D   lt p align  center  gt  x000D     lt canvas id  myCanvas  style  background  220000  width  700  height  500  align  right  gt  lt  canvas gt  x000D   lt  p gt  x000D   x000D   x000D

[css] Centering a canvas

Examples related to css

Examples related to html

Examples related to canvas