Canvas und Attribut vs. CSS

[M.]

Mahlzeit,
hab mir mal <canvas> angesehen, weil ich mal Animationen im Browser testen wollte.

Nun hab ich folgendes Problem: Wenn ich <canvas width="250" height="250" id="speedo"></canvas>
schreibe, wird die gezeichnete Linie zentriert, wenn ich <canvas id="speedo"></canvas> schreibe und per CSS width und height angebe, dann nicht.

Ich gehe davon aus, dass es mit den Init-Werten zu tun hat, aber ich kommnicht dahinter, wo das Problem liegt.

Kann es aktuell nicht online stellen, da es im Framework läuft, deshalb ist das HTML auch nur ein Ausschnitt.

Grundsätzlich ist es ja nicht schlimm, wenn da ein paar Attribute drinstehen, aber es spricht gegen strikte Trennung von Inhalt und Design und ist bei Änderungen mehr Aufwand.

Getestet mit Chrome 27.0.1453.110 unter Debian. Wäre schön, wenn mir jemand das Problem verstehen hilft ;)

CSS-Code

  
canvas {  
	border: 1px solid red;  
}  
  
canvas#speedo {  
	width: 250px;  
	height: 250px;  
}  

JS (Aktuell wird ein Sekundenzeicger animiert, später soll die Geschwindigkeit angezeigt werden, die vom GPS kommt)

  
function speedo(oSpeedo)  
{  
	var width = document.getElementById('speedo').offsetWidth;  
	var height = document.getElementById('speedo').offsetHeight;  
  
	var objDate = new Date();  
	var intSek = objDate.getSeconds();  
	var cSpeedo = oSpeedo.getContext("2d");  
  
	cSpeedo.clearRect(0, 0, width, height);  
  
	cSpeedo.save();  
	cSpeedo.translate(width / 2, height / 2);  
  
	cSpeedo.save();  
	cSpeedo.rotate(intSek * Math.PI / 30);  
	cSpeedo.beginPath();  
	cSpeedo.moveTo(0, 10);  
	cSpeedo.lineTo(0, 0 - (width / 2));  
	cSpeedo.lineWidth = 2;  
	cSpeedo.strokeStyle = "#a00";  
	cSpeedo.stroke();  
	cSpeedo.restore();  
  
	cSpeedo.restore();  
  
	timer = window.setTimeout(function(){ speedo(oSpeedo);}, 1000);  
}  

HTML

  
<canvas width="250" height="250" id="speedo"></canvas>  
<!-- <canvas id="speedo"></canvas> -->  
  
<script type="text/javascript">  
window.onload = function(){  
	var oSpeedo = document.getElementById("speedo");  
  
	if(oSpeedo.getContext){  
		speedo(oSpeedo);  
	}  
}  
</script>