nicht angemeldet
Hallo zusammen,
ich habe mal eine Frage zu dem Canvas-Tag in Firefox:
Ich möchte eine Zeichenebene anlegen, die über das ganze Fenster geht. Daher habe ich dann folgende Konstruktion gemacht:
<html>
<head>
<style type="text/css">
canvas { border: 1px solid black; }
</style>
</head>
<body>
<canvas id="mainCanvas" width="1" height="1"></canvas>
<script type="text/javascript" src="js/include.js"></script>
ctx.beginPath();
ctx.moveTo(25,25);
ctx.lineTo(105,25);
ctx.lineTo(25,105);
ctx.fill();
</body>
In der JS-Datei include.js steht dann:
var canvas = document.getElementById("mainCanvas");
if (canvas.getContext) {
alert("Benutze Canvas");
var ctx = canvas.getContext('2d');
canvas.style.height = self.innerHeight-20;
canvas.style.width = self.innerWidth-20;
}
Der Abzug von 20 Pixeln ist wegen den Scrollbars nötig. Was jetzt aber passierte ist, dass ich nichts gesehen habe. Nach einigem Ausprobieren habe ich dann mal
<canvas id="mainCanvas" width="400" height="400"></canvas>
in den <body>-Bereich geschrieben und siehe da, es ging. Allerdings wird dann durch meine Anpassen von height und width alles verzerrt dargestellt. Und das, obwohl ja erst nach dem Vergrößern etwas gezeichnet wird.
Kennnt sich hier jemand damit aus und kann mir sagen, wie ich das Problem elegant lösen kann?
MudGuard