HTML Canvas

• Home
• Kontakt
• Impressum
• Suche

• CSS
• HTML
• Javascript Basis
• Javascript für Webseiten
• Tutorials
• SVG / 3D-Canvas MathML

Malen und Zeichnen per Programm statt Pinsel

Ohne Javascript ist ein HTML Canvas-Element das pure NICHTS. In einem Canvas wird programmatisch gezeichnet, verwaltet und gespeichert. Erst Javascript für canvas füllt ein Canvas-Element mit Text, Bildern, Formen wie Vierecken und Kreisen und Verläufen. Die Objekte im Canvas lassen sich per JavaScript animieren.

Alle modernen Browser unterstützen das canvas-Objekt, schon IE 9 konnte mit dem HTML Canvas umgehen, und mit wenigen Zeilen Javascript malt die Maus oder der Finger ein Bild, das der Benutzer herunterladen kann. Mal mal was …

Einfaches HTML-Canvas-Element als Sketchpad Zeichnen mit der Maus am Desktop oder dem Finger auf dem Touchscreen

Sketchpad löschen PNG speichern

Anders als mit SVG entstehen in einem HTML Canvas Bitmaps und keine Vektorgrafik. Die Zeichnung in einem HTML Canvas (sei es nun eine Malerei oder eine von Javascript erzeugte Bitmap) lässt sich in ein PNG umwandeln und der Benutzer kann das Bild herunterladen.

Canvas oder SVG?

Warum ein weiteres Element, wenn wir doch SVG direkt in HTML einsetzen können? Die Daumenregeln, ob besser SVG oder ein HTML-canvas-Element und Javascript eingesetzt wird, sind

Grafik mit HTML canvas

• Die Zeichnung ist kein Teil des DOMs: CSS wirkt nicht auf die Objekte in einem canvas.
• Die Zeichnung im Canvas besteht aus Pixeln und lässt sich als Bitmap-Bild speichern.
• canvas bringt keine eingebauten Animationen mit, aber Zeichnen mit Javascript ist leistungsstark und schnell.

Grafik mit SVG

• Die Elemente eines SVG-Objekts sind Teil des DOMs, CSS wie in HTML.
• SVG wird mit Vektoren gezeichnet.
• SVG hat eingebaute Effekte und Animationen.
• Die SVG-Syntax ähnelt HTML, ist etwas langsamer als ein canvas, aber besser intuitiver und barrierefrei.

Für Frontend-Entwickler ist SVG schon aufgrund seiner Ähnlichkeit mit HTML und dem Einsatz von CSS für Animationen einfacher. Für Spiele-Programmierung ist canvas effizienter, eben weil es nicht dem DOM unterliegt.

Canvas und SVG lassen sich kombinieren: Eine dynamische canvas-Animation kann z.B. über einem SVG-Hintergrund liegen. In ein Canvas läßt sich kein SVG zeichnen, aber in einem Canvas kann eine SVG-Grafik als Bild geladen werden.

Im Grunde genommen ist es eine Frage der Anwendung: In einem Canvas kann im Browser gezeichnet und gemalt werden wie in einem Illustrationsprogramm, in einem Canvas können Bilder bearbeitet werden wie in einem Bildbearbeitungsprogramm. SVG kann Graphen und Karten aus dynamischen Daten dargestellt werden. Beides – Canvas und SVG – haben ihre speziellen Einsatzbereiche.

Darstellung des canvas-Elements

Das Koordinatensystem des canvas-Objekts beginnt oben links. Beim Laden der Seite hat das canvas keinen Hintergrund und ist unsichtbar.

<canvas id="canvas" width="500" height="180" style="background-image: url('grid.png')"></canvas>

Javascript canvas Tag: Rechteck mit Schatten

<script> const canvas = document.getElementById("canvas"); const ctx = canvas.getContext("2d"); ctx.fillStyle = 'pink'; ctx.shadowOffsetX = 5; ctx.shadowOffsetY = 5; ctx.shadowBlur = 5; ctx.shadowColor = 'rgba(204, 204, 204, 0.5)'; ctx.fillRect(5,5,60,150); </script>

In einer HTML-Seite dürfen mehrere canvas-Elemente sitzen und canvas-Elemente dürfen einander überlappen. So kann z.B. ein canvas-Element den Hintergrund für ein Spiel bilden, ein anderes enthält die Sprites, ein drittes canvas-Element die Steuerung.

Canvas responsive

Ein Canvas-Element zieht seine Fläche immer im Seitenverhältnis auf, wenn eine Dimension geändert wird. Canvas ist also wunderbar responsiv, aber weil Canvas Pixel für Pixel ein Bitmap-Bit erzeugt, werden die Pixel genauso sichtbar wie bei der Vergrößerung eines JPEG- oder PNG-Bildes.

CSS

.responsive { width: 100%; max-width: 500px; } .responsive canvas { width: 100%; aspect-ratio: 300/200; } <div class="responsive"> <canvas id="responsive" width="300" height="200"> </canvas> </div>

Eine weitere Lösung für ein responsives Canvas-Element ist die CSS-transform-Eigenschaft.

@media (max-width: 499px) { canvas { transform: scale(0.5) } } @media (min-width: 500px) { canvas { transform: scale(1) } }

HTML-Attribute für canvas

widthBreite des canvas in Pixeln (Vorgabe ist 300px) heightHöhe des canvas in Pixeln (Vorgabe ist 150px) toDataURL (type)Wandelt den Inhalt des canvas in ein statisches Bild um. Der Parameter type legt den Typ fest (z.B. image/png) getContext (ctxID)Zeichen-Kontext des canvas

Alle Browser müssen image/png unterstützen, weitere Bild-Typen können optional unterstützt werden.

3D Rendering in HTML Canvas

WebGL ist die Umsetzung von 3D-Grafik im canvas-Element. Anstelle der Initialisierung var ctx = canvas.getContext('2d') tritt

canvas.getContext("webgl");

WebGL basiert auf OpenGL und bringt 3D-Grafik und -Rendering ohne Browser-Plugin in die Webseite.

Mehr zu HTML Canvas

• Javascript API für HTML canvas-Elemente Das HTML canvas-Element ist nur eine leere Box. Erst Javascript füllt das canvas mit Formen und animiert den Inhalt.
• Canvas für 3D Grafik und Animationen auf Webseiten funktioniert dank WebGL und der Javascript-threejs-Library.
• SVG und Javascript SVG kann mit Javascript genauso gescriptet werden wie HTML.
• Dokumente einbinden: object oder iframe Dank verbesserter Sicherheitsvorkehrungen ist iframe ein vollwertiges Mitglied in HTML.

Externe Quellen

• Javascript SVG parser and renderer on Canvas
• WebGLStudio.js 3D Development environment for the web
• The Official Khronos WebGL Repository
• Introduction: Creating a Spinning Box
• Adobe Illustrator-Plugin für den Export von Grafik als Canvas auf Github
• Beispiel für HTML Canvas, die mit SVG nicht machbar sind

HTML-Elemente – Struktur / Attribute

• Grundlagen: HTML-Elemente und Struktur
• HTML-doctype, head und body
• Korrektes valides HTML
• HTML-Formatierung durch den Browser
• HTML-Attribute
• id, class, style Attribute
• Attribute decoding, loading, hidden, download
• Liste der HTML-Elemente
• Custom Elements Eigene HTML-Elemente
• HTML Manifest Application Cache

head und Metadaten

• HTML Doctype
• html Wurzelelement des Dokuments
• head Kopf des Dokuments
• HTML meta-Tag Informationen zum Dokument
• meta name=viewport Anzeigebereich mobiler Geräte
• Cache löschen meta cache-control, expires, meta
• JSON-LD Metadaten in einem Bündel
• HTML link-Element CSS einbinden
• HTML title-Element Die wichtigste Überschrift
• style-Tag CSS im head einbinden
• base Basis-Adresse (URL)

Inhalt strukturieren

• HTML-Elemente verschachteln (Nesting)
• body Sichtbarer Bereich der HTML-Seite
• Struktur article, section, header
• footer nicht das Letzte
• h Überschriften h1, h2, h3, h4, h5 und h6
• aside »Am Rande«
• address Hervorhebung von Adressen
• table HTML-Tabellen
• td / th • Tabellenzellen
• caption • Überschrift einer Tabelle
• colgroup, col Tabellenspalten gruppieren
• thead, tfoot, tbody • Tabellen strukturieren

Inhalt gruppieren

• main Hauptinhalt der Seite
• div Behälter für Inhalte
• dl Definitionslisten
• figure figcaption Abbildungen
• hr Horizontale Linie
• br Zeilenumbruch ohne Formatwechsel
• p Absatz in einem Text
• pre vorformatierter Text
• ul ungeordnete Liste
• ol automatisch nummerierte Liste
• menu Toolbar / Werkzeugleiste
• blockquote Ausführliches Zitat
• details und dialog Interaktive Elemente

Text hervorheben

• a Link (Ankertag)
• a download, mailto, tel
• span organisiert Inline-Elemente
• em, strong, i und b Betonung, fett und kursiv
• mark relevant im aktuellen Zusammenhang
• time | Zeitangaben
• bdo | bdi Laufrichtung des Textes
• del, ins gelöscht, geändert
• sub + sup hoch-/tiefstellen
• small kurzer Hinweis
• abbr Abkürzung
• cite Zitat (inline)
• code, dfn, var • technischer Text

Bilder, Grafik, Video, iframe

• img Bilder in Webseiten einfügen
• srcset img-Attribut für versch. Monitore
• picture Container für alternative Bildgrößen
• Video / Audio für Webseiten
• HTML Video-Tracks – Untertitel
• object Medien anzeigen
• area map Bild in Image Map unterteilen
• iframe • Inline-Fenster
• frame • frameset • noframes (nicht HTML5)

Formulare und Eingabefelder

• form HTML-Formular
• input Formular – Eingabefeld
• Attribute für input-Elemente
• label Name eines Formularelements
• input placeholder, autofocus
• textarea Feld für lange Texte
• input pattern Formulare validieren
• input checkbox, radio, image, button
• input type file – Datei-Upload
• input type date / time – Kalender
• input type color, number – Picker
• type=submit Formular absenden

Weitere Formular-Elemente

• button Schaltfläche
• select Auswahlliste
• input type range
• input und datalist Auswahl von Werten vorgeben
• option / optgroup Optionen einer Selectliste
• progress, meter, output Benutzerhilfen
• fieldset / legend • Eingabefelder gruppieren
• autocomplete Automatisches Vervollständigen
• Beispiel HTML-Formular und PHP-Skript

Scripting

• script Script in HTML einbinden
• template-Tag Vorlage für Scripte
• data Maschinenlesbare Inhalte
• noscript Browser ohne Javascript
• canvas Zeichnen mit Javascript