jack: canvas per JS anpassen

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?

  1. 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

    --
    Hinweis an Fragesteller: Fremde haben ihre Freizeit geopfert, um Dir zu helfen. Helfe Du auch im Archiv Suchenden: Beende deinen Thread mit einem "Hat geholfen" oder "Hat nicht geholfen"!
    1. 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

  2. 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

    --
    Warum nennt sich Andreas hier MudGuard?
    Schreinerei Waechter
    O o ostern ...
    Fachfragen unaufgefordert per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
    1. 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