Dynamic Centering and Alignment on the Canvas
In this JavaScript programming exercise you can learn the logic behind dynamic centering and alignment for dynamically positioning your canvas assets.
<!DOCTYPE html>
<html>
<head>
<style>
body{ margin:10px; background:#666; }
#my_canvas{ background:#FFF; border:#000 1px solid; }
</style>
<script>
function draw(){
var ctx = document.getElementById('my_canvas').getContext('2d');
ctx.fillStyle = "magenta";
var rectW = 100;
var rectH = 100;
var rectX = (ctx.canvas.width * .5) - (rectW * .5);
var rectY = (ctx.canvas.height * .5) - (rectH * .5);
ctx.fillRect(rectX, rectY, rectW, rectH);
}
window.onload = draw;
</script>
</head>
<body>
<canvas id="my_canvas" width="500" height="350"></canvas>
</body>
</html>