How to center html 5 canvas using javascript
I am trying to center a html 5 canvas dynamic window with javascript. I know the code I have is not working, but I am wondering if there is a way that implements the margin on the left: auto / margin-left: an automatic technique that usually centers the elements inside the html page. I've also tried this with my canvas css class and it doesn't work, so any help is appreciated. Thank.
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() {
}
+3
source to share
3 answers
Make the canvas a block-level element. You can do it 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>
+2
source to share
you will like it 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;
0
source to share