Css Element per JS einsetzen

[Pit]

Guten Tag,

mir gelingt es nicht, per JS ein Element in ein anderes Elemet einzusetzen.

Ich schaffs zwar ins übergeordnete Element, aber nicht in das Element, das ich eigentlich möchte.

var parent = document.getElementById("canvas");
parent.childNodes[0].nodeValue = "";

var myCA = document.createElement("canvas");
myCA.setAttribute("id", "myCanvas");
parent.appendChild(myCA);

var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");

Hier generiere ich ein Canvaselement, in das ich eine Linie einfügen möchte.

var Line = document.createElement('hr');
canvas.appendChild(Line);

Aber die Linie wird nicht generiert.

Was mache ich faksch? Denn wenn ich parent.appendChild(Line); nehme, wird das Element generiert (nur eben nicht innerhalb des Eements, das ich eigentlich wollte).

Pit

[Gunnar Bittersmann]

@@Pit

var myCA = document.createElement("canvas");
myCA.setAttribute("id", "myCanvas");
parent.appendChild(myCA);

var canvas = document.getElementById("myCanvas");

Das ist Unsinn.

Mit myCA hast du bereits die Nadel (die Referenz auf das Element) in der Hand; es ist unsinnig, dasselbe Element nochmal im Heuhaufen (DOM) zu suchen.

Hier generiere ich ein Canvaselement, in das ich eine Linie einfügen möchte.

var Line = document.createElement('hr');
canvas.appendChild(Line);

Aber die Linie wird nicht generiert.

Was mache ich faksch?

hr ist keine Linie. hr ist ein thematischer Bruch (welcher desöfteren als Linie visialisiert wird). [Spec]

canvas ist eine Zeichenfläche. canvas ist nicht dafür gedacht, andere HTML-Elemente zu enthalten, die dargestellt werden sollen – außer als Fallback in Browsern, die canvas nicht unterstützen.

LLAP 🖖

[Pit]

Hallo Gunnar,

Mit myCA hast du bereits die Nadel (die Referenz auf das Element) in der Hand; es ist unsinnig, dasselbe Element nochmal im Heuhaufen (DOM) zu suchen.

Einverstanden...ist Überbleibsel unzähliger Versuche 😉

hr ist keine Linie. hr ist ein thematischer Bruch (welcher desöfteren als Linie visialisiert wird). [Spec]

Mir geht es darum, innerhalb des Canvas eine Linie zu haben, die aber selber kein Canvas ist. Hintergrund: Das gesamte Cnavas soll später ohne diese Linie zum Image werden. Zeichne ich die Linie mit stroke(), dann habe ich auch die Linie im Image, was ich aber nicht möchte.

canvas ist eine Zeichenfläche. canvas ist nicht dafür gedacht, andere HTML-Elemente zu enthalten, die dargestellt werden sollen – außer als Fallback in Browsern, die canvas nicht unterstützen.

Schade. Das heißt, man kann z.b. ein Canvas nicht per css in 2 Zeichenflächen unterteilen können?

Pit

[MudGuard]

Hi,

Mir geht es darum, innerhalb des Canvas eine Linie zu haben, die aber selber kein Canvas ist. Hintergrund: Das gesamte Cnavas soll später ohne diese Linie zum Image werden. Zeichne ich die Linie mit stroke(), dann habe ich auch die Linie im Image, was ich aber nicht möchte.

Schade. Das heißt, man kann z.b. ein Canvas nicht per css in 2 Zeichenflächen unterteilen können?

Wenn Du 2 Zeichenflächen haben willst, nimm 2 Canvas-Elemente.

Wenn Du eine Linie über einer Zeichenfläche haben willst, positionieren ein Element, das die Linie enthält, über der Zeichenfläche.

cu,
Andreas a/k/a MudGuard

[Pit]

Hallo Andreas,

Wenn Du eine Linie über einer Zeichenfläche haben willst, positionieren ein Element, das die Linie enthält, über der Zeichenfläche.

Quasi als Overlay? Dann kann ich aber nicht über die Linie hinweg zeichnen. Dasselbe gilt für 2 Canvas-Elemente…

Pit

[Rolf B]

Hallo Pit,

kann nicht über die Linie hinweg zeichnen

Möchtest Du, dass deine Zeichenoperationen im Canvas die Linie überdecken? Die Linie ist sozusagen eine Hilfslinie? Wie wär's dann mit einem transparenten Canvas-Hintergrund und einer Linie dahinter (entweder in 2. Canvas oder ein div mit border (NICHT hr), dass Du mit position:absolute dahinter legst?

Wenn die Linie immer sichtbar sein soll, ist's einfacher, dann legst Du das entsprechende DIV einfach mit passender z-order davor.

Die grundsätzliche Alternative könnte sein, für das Drucken den Canvas ohne Hilfslinie neu zu zeichnen. Zum Beispiel über Events (beforeprint/afterprint) oder über einen Button, der die Hilfslinie ein-/ausschaltet.

Rolf

[Gunnar Bittersmann]

@@Rolf B

oder ein div mit border

Oder ein Pseudoelement.

LLAP 🖖

[Pit]

Danke an alle.

Ich habe die Linie jetzt gelassen, so schlecht sieht die gar nicht aus.

Trotzdem dank für die Mithilfe.

Ich habe noch ein Problemchen mit Canvas, aber das passt so gar nicht zm Thema, deshalb mache ich da lieber einen neuen Thread auf.

Pit

[ThomasM]

Hallo Pit,

var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");

Hier generiere ich ein Canvaselement, in das ich eine Linie einfügen möchte.

Dann ist das der Weg zum Zeichnen einer Linie:

<canvas id="myCanvas"></canvas>
<script>
  var canvas = document.getElementById("myCanvas");
  var context = canvas.getContext("2d");

  context.beginPath();
  context.moveTo(10, 20);
  context.lineTo(100, 50);
  context.lineWidth = 2;
  context.strokeStyle = "#F00";
  context.stroke();
</script>

Grüße,
Thomas

[Pit]

Hallo Thomas,

Dann ist das der Weg zum Zeichnen einer Linie:

Erstmal danke. Genau eine solche Linie will ich gerade ersetzen 😉

Oder gibt es auch einen Weg, genau diese Linie wieder zu löschen, bevor man das Canvas in ein Image wandelt (und zwar, ohne zusätzlich gezeichnetes auch zu löschen)?

Pit

[JürgenB]

Hallo Pit,> Hallo Thomas,

Oder gibt es auch einen Weg, genau diese Linie wieder zu löschen, bevor man das Canvas in ein Image wandelt (und zwar, ohne zusätzlich gezeichnetes auch zu löschen)?

ich glaube, das geht nicht. Du musst alles löschen und bis auf die Linie neu zeichnen.

Oder du denkst mal über SVG nach.

Gruß
Jürgen

[ThomasM]

Hallo *,

Oder du denkst mal über SVG nach.

Dort hat man nämlich auch ein DOM und kann Methoden wie appendChild() / removeChild() verwenden.

Grüße,
Thomas