How to center a html 5 canvas with javascript

Question

I'm trying to center a dynamic html 5 canvas window with javascript. I know the code I have doesn't work, but I'm wondering if there's a way that implements the margin-left: auto/margin-left: auto technique that usually centers elements within a html page. I've also tried this with my canvas class css and that does not work either so any help is appreciated. Thanks.

My code:

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");


document.getElementById("canvas").style.marginLeft = "auto";
document.getElementById("canvas").style.marginRight = "auto";

canvas.width = 300;
canvas.height = 300;
drawScreen();

formElement = document.getElementById("height");
formElement.addEventListener('change', heightChanged, true);

formElement = document.getElementById("width");
formElement.addEventListener('change', widthChanged, false);

function widthChanged(e) {
  var target = e.target;
  canvas.width = target.value;
  drawScreen();
}

function heightChanged(e) {
  var target = e.target;
  canvas.height = target.value;
  drawScreen();
}

function drawScreen() {
}

Answer 1

Make the canvas a block-level element. You can do so with CSS or by adding this line to your code:

canvas.style.display= 'block';

Example:

 var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d"); document.getElementById("canvas").style.marginLeft = "auto"; document.getElementById("canvas").style.marginRight = "auto"; canvas.style.display= 'block'; canvas.width = 300; canvas.height = 300; drawScreen(); formElement = document.getElementById("height"); formElement.addEventListener('change', heightChanged, true); formElement = document.getElementById("width"); formElement.addEventListener('change', widthChanged, false); function widthChanged(e) { var target = e.target; canvas.width = target.value; drawScreen(); } function heightChanged(e) { var target = e.target; canvas.height = target.value; drawScreen(); } function drawScreen() { } 

 canvas { border: 1px solid black; background: yellow; } 

 <canvas id="canvas"></canvas> <div id="height"></div> <div id="width"></div> 

Answer 2

you do like so with css :

canvas {
        display: block;
        position: absolute;
        margin: auto;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
    }

or with javascript :

 document.getElementById("canvas").style.display = "block";
        document.getElementById("canvas").style.margin = "auto";
        document.getElementById("canvas").style.position = "absolute";
        document.getElementById("canvas").style.top = 0;
        document.getElementById("canvas").style.bottom = 0;
        document.getElementById("canvas").style.left = 0;
        document.getElementById("canvas").style.right = 0;

LIVE DEMO

Answer 3

why don't you put your canvas into a div container ?

you can do it via javascript too.

var container = document.createElement("div");
container.style.marginLeft = "auto";
container.style.marginRight = "auto";
container.style.width = "300px";

container.innerHtml = canvas;