If it works I wouldn't worry about it, but meant something along these lines. Similar to what Sensei mentioned using CSS for absolute positioning.
<!doctype html>
<html lang="en">
<head>
<style>
body {
background-color: blue;
}
canvas {
position: absolute;
left: 100px;
top: 50px;
}
</style>
</head>
<body>
<canvas id="gameCanvas" width="578" height="200"></canvas>
<canvas id="textCanvas" width="578" height="200"></canvas>
<script>
var gameCanvas=document.getElementById("gameCanvas");
var ctx=gameCanvas.getContext("2d");
ctx.fillStyle="red";
ctx.fillRect(0,0, gameCanvas.width, gameCanvas.height);
var message, canvas = document.getElementById('textCanvas'), context = canvas.getContext('2d'), boundingrect = canvas.getBoundingClientRect();
function getMousePos(e) {
return {
x: e.clientX - boundingrect.left,
y: e.clientY - boundingrect.top
};
}
canvas.addEventListener('mousemove', function(e) {
mousePos = getMousePos(e);
message = 'Mouse position: ' + mousePos.x + ',' + mousePos.y;
context.clearRect(0, 0, canvas.width, canvas.height);
context.font = '18pt Calibri';
context.fillStyle = 'black';
context.fillText(message, 10, 25);
}, false);
</script>
</body>
</html>
Granted can see some limitations with this too, so depends on what you are looking for.