twitter bootstrap and canvas positioning
i am trying to use twitter bootstrap in one of my projects and what i really want is a header with link and a HTML canvas in the middle of the page. Reference:
When I add a html canvas tag and give it a width and height I get two undesirable effects:
- the upper border of the canvas is cutoff and have to apply margin to the canvas
- the canvas is pushed to the right and again i have to apply margin to it.
I'd like the canvas to stay at the center of the page.
Answer
In order to keep your canvas element in the center of the screen you will have to wrap it with a containing div as follows.
<div>
<canvas></canvas>
</div>
We then need to create and apply a class that will give the containing div the same pixel width as the canvas inside.
<style>
.container-canvas {
/* This could be done in one single declaration. See the extended sample. */
margin-right: auto;
margin-left: auto;
width: 800px;
}
</style>
<div class="container-canvas">
<canvas width="800" height="480"></canvas>
</div>
This will center your canvas and keep the canvas in the center as you resize your browser window. As for the nav bar overlaying your newly created canvas element you will need to add more styling to the main content container.
<style>
.container-main {
margin-top: 75px;
}
</style>
<div class="container container-main">
<div class="container-canvas">
<canvas width="800" height="480"></canvas>
</div>
</div>
For the extended/complete sample see below:
<!doctype html>
<html>
<head>
<title>Bootstrap + Canvas</title>
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/bootstrap-responsive.css">
<style>
.container-main {
margin-top: 75px;
}
.container-canvas {
margin: 0 auto;
width: 800px;
}
canvas {
border: 1px solid #333;
}
</style>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="brand" href="#">Project name</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="container container-main">
<div class="container-canvas">
<canvas id="mycanvas" width="800" height="480">
This is my fallback content.
</canvas>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script>
function draw() {
var canvas = document.getElementById("mycanvas");
if (canvas.getContext) {
var ctx = canvas.getContext("2d");
ctx.fillStyle = "rgb(200,0,0)";
ctx.fillRect(10, 10, 55, 50);
ctx.fillStyle = "rgba(0,0,200,0.5)";
ctx.fillRect(30, 30, 55, 50);
} else {
alert("Canvas isn't supported.");
}
}
$(function() {
draw();
});
</script>
</body>
</html>