canvas per JS anpassen
jack
- html
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?
Hi,
<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>
JS außerhalb von SCRIPT? Das soll funktionieren?
wie ich das Problem elegant lösen kann?
Wie wäre es, daß Element unsichtbar zu machen und nach dem Zeichnen einfach sichtbar?
Gruß, Cybaer
JS außerhalb von SCRIPT? Das soll funktionieren?
Es steht innerhalb von SCRIPT, da habe ich nur unsauber kopiert beim schreiben.
Wie wäre es, daß Element unsichtbar zu machen und nach dem Zeichnen einfach sichtbar?
Das löst mein Problem leider nicht, da ich ja erst im Nachhinein weiß wie groß es werden soll.
jack
Hi,
canvas.style.height = self.innerHeight-20;
canvas.style.width = self.innerWidth-20;
height und width erwarten keine Zahlen als Wert, sondern Längen (oder Prozentwerte oder auto oder inherit).
cu,
Andreas
height und width erwarten keine Zahlen als Wert, sondern Längen (oder Prozentwerte oder auto oder inherit).
Korrekt. Anfängerfehler. Aber dennoch bleibt der Effekt leider. Sonst noch eine Idee?
jack