Centering a canvas

Viewed 135461

How do I markup a page with an HTML5 canvas such that the canvas

  1. Takes up 80% of the width

  2. Has a corresponding pixel height and width which effectively define the ratio (and are proportionally maintained when the canvas is stretched to 80%)

  3. 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.

11 Answers

Given that canvas is nothing without JavaScript, use JavaScript too for sizing and positionning (you know: onresize, position:absolute, etc.)

Related