Centering a canvas

Question

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.

Answer 1

This will center the canvas horizontally:

#canvas-container {    width: 100%;    text-align:center; }  canvas {    display: inline; } 

HTML:

<div id="canvas-container">    <canvas>Your browser doesn't support canvas</canvas> </div> 

Answer 2

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:

<canvas id="canvas" width="400" height="300">No canvas support</canvas> 

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/