Skip to main content

Digitales Whiteboard

Zeichne und skizziere auf einem HTML5-Canvas mit Stift, Radiergummi, Farben und PNG-Download.

Geprüft von · Zuletzt geprüft

3

Draw with your mouse or finger. Use the toolbar above to switch tools, change colors, and adjust line width.

So verwendest du das digitale Whiteboard

  1. Wähle ein Werkzeug in der Symbolleiste: Stift zum Zeichnen, Radiergummi zum Entfernen von Strichen. Der aktuelle Modus ist hervorgehoben, damit du auf einen Blick sehen kannst, welcher aktiv ist.
  2. Wähle eine Farbe aus den voreingestellten Feldern oder öffne den nativen Farbwähler für einen beliebigen Hex-Wert - nützlich beim Diagrammieren gegen eine Markenpalette.
  3. Passe die Strichstärke mit dem Schieberegler zwischen 1 und 20 Pixeln an. Dickere Striche eignen sich gut für Hauptformen, dünnere für Anmerkungen und Beschriftungen.
  4. Zeichne auf dem Canvas mit Maus, Trackpad, Finger oder Eingabestift. Zeigerereignisse sind vereinheitlicht, sodass ein Apple Pencil, ein Wacom-Tablet oder ein Surface-Pen alle gleich anfühlen.
  5. Als PNG herunterladen, wenn die Skizze bereit ist zur Übergabe. Die Datei wird mit einem Zeitstempel benannt, damit aufeinanderfolgende Downloads sich nicht überschreiben.
  6. Löschen wischt den gesamten Canvas nach einem Bestätigungsdialog - es gibt keinen Rückgängig-Stapel, also verwende den Radiergummi für lokale Fehler und Löschen nur, wenn du wirklich neu starten möchtest.

Was dieses Werkzeug macht und wie es funktioniert

Ein digitales Whiteboard ist ein 2D-räumlicher Canvas, bei dem die Position einer Markierung genauso wichtig ist wie die Markierung selbst. Diese Implementierung verwendet ein HTML-<canvas>-Element mit einem 2D-Rendering-Kontext, der über getContext('2d') erhalten wird. Das Strich-Rendering hört auf vereinheitlichte Zeigerereignisse - pointerdown, pointermove, pointerup - statt auf separate Maus- und Touch-Handler, weshalb es auf Desktop und Tablet konsistent funktioniert. Bei jedem Move-Ereignis ruft das Werkzeug ctx.lineTo() gefolgt von ctx.stroke() auf, mit lineCap auf rund gesetzt, sodass Striche natürlich enden statt quadratische Endpunkte zu zeigen.

Der Radiergummi wird mit ctx.globalCompositeOperation = 'destination-out' implementiert, der Alpha-Null-Pixel einschnitzt statt Weiß zu malen - wichtig, weil ein Radiergummi-Strich den darunter liegenden transparenten Hintergrund enthüllt statt weiße Narben zu hinterlassen, die sichtbar werden, wenn du später mit einem transparenten PNG speicherst. Die Download-Schaltfläche ruft canvas.toDataURL('image/png') auf, um eine Data-URL zu erzeugen und löst einen synthetischen Anker-Klick mit dem download-Attribut aus, um die Datei zu speichern. Da der Canvas Pixel und keine Pfade speichert, gibt es keinen Vektorexport - das Whiteboard ist ein Rasterwerkzeug.

Wann du zu einem Whiteboard greifst

  • Skizzieren einer Systemarchitektur während eines Design-Reviews - Boxen, Pfeile und ein X über dem kaputten Element - wenn Worte das Layout nicht transportieren können.
  • Erklären eines Konzepts unter vier Augen über eine Bildschirmfreigabe, wo das Zeichnen der Idee dreißig Sekunden braucht gegenüber fünf Minuten Tippen.
  • Brainstorming mit Klebezettel-ähnlichen Clustern: grobe Beschriftungen auf dem Canvas verstreut, damit die Gruppe Beziehungen sehen kann, bevor sie kodifiziert werden.
  • Kommentieren eines Screenshots oder Fotos, das du auf den Canvas einfügst (Browser lassen dich ein Bild auf einen Canvas ziehen), mit Pfeilen und Kreisen für Fehlerberichte.
  • Unterrichten oder Nachhilfe in Mathematik, wo handgeschriebene Gleichungen und Diagramme schneller sind als jede Formeleditor-Benutzeroberfläche.
  • Erfassen einer schnellen Skizze während eines Telefongesprächs, ohne in eine schwerere App wie Figma oder Miro zu wechseln.

Häufige Fallstricke und Randfälle

Die häufigste Überraschung ist das Fehlen von Rückgängig. Da das Werkzeug keine Strich-Geschichte führt, gibt es keine Möglichkeit, die letzte Markierung zurückzunehmen - der Radiergummi ist der partielle Fix, und für einen sauberen Neustart verwendest du Löschen. Ein weiteres Problem sind hochauflösende Displays: Standardmäßig wird ein Canvas bei CSS-Pixeldichte gerendert, was auf einem Retina-Bildschirm sichtbar verschwommene Striche erzeugt. Diese Implementierung skaliert den Backing-Speicher auf devicePixelRatio, um scharf zu bleiben. Touch-Scroll-Konflikte auf Mobilgeräten werden durch touch-action: none auf dem Canvas-Element behandelt, sodass ein Zwei-Finger-Wischen nicht versucht, die Seite zu schwenken, während du versuchst zu zeichnen. Schließlich erfasst der PNG-Download das, was auf dem Canvas zu dem Zeitpunkt ist, an dem du die Schaltfläche drückst - keine separaten Ebenen, kein bearbeitbarer Zustand, keine Möglichkeit, später zurückzukommen und einen bestimmten Strich zu optimieren. Wenn du das brauchst, brauchst du ein Vektorwerkzeug.

Canvas und Whiteboards im Kontext

Das HTML-<canvas>-Element wurde 2004 von Apple für Dashboard-Widgets eingeführt, in HTML5 standardisiert und ist jetzt im HTML Living Standard definiert. Es gibt JavaScript einen rohen Bitmap mit einer sofortigen 2D-API (plus WebGL für 3D). Digitale Whiteboards auf Canvas reichen von einfachen Single-Page-Apps wie diesem Werkzeug bis hin zu schweren kollaborativen Produkten wie Miro, FigJam, Mural und Microsoft Whiteboard, die WebSockets, Vektorspeicher, unendliches Schwenken und Multi-Cursor-Präsenz obendrauf schichten. Der konzeptionelle Vorfahre ist das physische Whiteboard, das im Laufe der 1990er als Besprechungsraum-Möbelstück Kreidetafeln ersetzte. Die räumliche Möglichkeit - verwandte Ideen nebeneinander, Pfeile dazwischen - ist das, was alle davon erben.

Vergleich mit Alternativen

Für ernsthafte Designarbeit ist ein Vektorwerkzeug - Figma, Sketch, Illustrator, Affinity Designer - immer besser, weil Striche bearbeitbar bleiben und Dateien skalierbar bleiben. Für kollaboratives Whiteboarding bieten Miro, FigJam oder Excalidraw Echtzeit-Cursors, Klebezettel, Vorlagen und persistente Boards. macOS Freeform funktioniert gut bei Apple-Stack-Teams. Gegenüber diesen gewinnt dieses Browser-Werkzeug an Geschwindigkeit: kein Login, keine Installation, kein Dateiname - Zeichnen innerhalb von zwei Sekunden nach dem Landen. Es verliert, wenn du morgen zur Skizze zurückkehren, zum Bearbeiten teilen oder über einen einzelnen Bildschirm-Canvas hinausgehen musst. Es ist der Unterschied zwischen dem Greifen nach einem Stift auf der nächsten Serviette und dem Öffnen eines CAD-Programms.

Häufig gestellte Fragen

Warum gibt es keine Rückgängig-Schaltfläche?

Rückgängig erfordert eine Geschichte von Strichen als diskrete Objekte, was das Werkzeug von einem einfachen Pixel-Canvas in ein geschichtetes Dokumentenmodell verwandelt und die Code-Komplexität vervielfacht. Für einen schnellen Skizzen-Anwendungsfall deckt der Radiergummi lokale Fehler ab und Löschen ermöglicht einen vollständigen Neustart, weshalb leichtgewichtige Canvas-Whiteboards auf Rückgängig verzichten. Wenn du es häufig brauchst, hat ein vektorgesichertes Werkzeug wie Excalidraw vollständiges Rückgängig/Wiederholen bei jedem Strich.

Funktioniert das Whiteboard mit einem Apple Pencil oder Wacom-Tablet?

Ja. Das Werkzeug hört auf Zeigerereignisse statt auf Legacy-Maus-oder- Touch-Ereignisse, sodass jeder Eingabestift, den der Browser meldet - Apple Pencil auf iPad Safari, Surface Pen auf Edge, Wacom-Geräte - dasselbe Zeichenverhalten erzeugt. Drucksensitivität ist über pointerEvent.pressure verfügbar, aber diese Implementierung moduliert die Strichstärke derzeit nicht davon, sodass jeder Strich gleichmäßig ist, unabhängig davon, wie fest du drückst.

Wie funktioniert der Radiergummi technisch?

Der Radiergummi malt keine weißen Pixel. Er setzt den globalCompositeOperation des Canvas-Kontexts auf "destination-out", was jede nachfolgende Zeichenoperation dazu bringt, Alpha von darunterliegenden Pixeln abzuziehen. Effektiv enthüllt der Radiergummi Transparenz. Das ist wichtig, weil ein Weiß-mal-Radiergummi sichtbare Narben hinterlassen würde, wenn du später die Hintergrundfarbe änderst oder als transparentes PNG exportierst; destination-out hinterlässt ein sauberes Loch.

Warum wird der Download als PNG statt als JPEG oder SVG gespeichert?

PNG ist das richtige Rasterformat für Skizzen mit flachen Farben, scharfen Kanten und großen einfarbigen Bereichen - verlustfreie DEFLATE-Komprimierung und volle Alpha-Unterstützung. JPEG würde Kompressionsartefakte um jeden Strichrand hinzufügen und unterstützt keine Transparenz. SVG würde das Speichern von Strichen als Vektorpfade erfordern, was dieses Canvas-basierte Werkzeug nicht tut. Für skalierbare Ausgabe ist ein vektornatives Werkzeug die richtige Wahl.

Ist das Whiteboard unendlich oder begrenzt?

Begrenzt auf den sichtbaren Canvas auf der Seite. Es gibt kein Schwenken und kein Zoomen, und eine Skizze, die den rechten Rand verlässt, wird abgeschnitten. Das unterscheidet sich von Miro oder FigJam, die unendliche Canvas mit Viewport-Schwenken bieten. Der begrenzte Ansatz passt zum "eine Skizze, ein PNG"-Anwendungsfall, auf den dieses Werkzeug abzielt; für einen unendlichen räumlichen Canvas sind diese Alternativen die richtige Wahl.

Sieht der Canvas auf hochauflösenden (Retina) Displays scharf aus?

Ja. Das Werkzeug skaliert den Canvas-Backing-Speicher entsprechend window.devicePixelRatio - auf einem 2x-Retina-Display hat ein 1000-Pixel breiter Canvas einen 2000-Pixel-breiten Backing-Speicher und Zeichenoperationen werden entsprechend skaliert. Ohne diesen Schritt würde jeder Strich weich erscheinen, weil der Browser eine 1x-Bitmap auf 2x-Pixel dehnen würde. Dieselbe Skalierung macht PNG-Downloads auf Retina doppelt so groß.

Wird die Skizze zwischen Sitzungen gespeichert?

Nein. Der Canvas-Pixel-Zustand wird im DOM-Knoten gehalten, und Neuladen oder Tab-Schließen löscht ihn. Es gibt kein localStorage-Backup, weil das Wiederherstellen eines Canvas aus rohen Pixeln entweder eine große Base64-Zeichenkette erfordern würde (gegen das 5-10-MB-Kontingent drückend) oder eine Strich-Geschichte (die dieses Werkzeug nicht führt). Wenn dir das Ergebnis wichtig ist, lade das PNG herunter, bevor du die Seite verlässt.

Sendet das Werkzeug Bilddaten an einen Server?

Nein. Canvas-Rendering, die PNG-Codierung über toDataURL und der Anker-Klick-Download finden alle in deinem Browser statt. Kein Bild-Byte verlässt die Seite. Der einzige Netzwerkverkehr ist das anfängliche statische Asset-Laden und site-weite Analytics bei Seitenaufruf, von denen keines den Canvas-Inhalt berührt. Du kannst nach dem Laden der Seite vom Internet trennen und weiterzeichnen.

Wie unterscheidet sich das vom Notizen-Scratchpad?

Das Scratchpad ist eindimensionaler Text: Zeichen in einem linearen Strom, nur Tastatur. Das Whiteboard ist zweidimensional und räumlich: Position trägt Bedeutung, und du zeichnest statt zu tippen. Verwende das Scratchpad zum Schreiben, das Whiteboard für Skizzen, Pfeile und Diagramme, wo "hier ist neben da" wichtig ist. Für gemischten Text und Skizze kombiniert Excalidraw beide Möglichkeiten.

Kann ich ein Bild zum Kommentieren importieren?

Nicht über eine dedizierte Importschaltfläche. Einige Browser ermöglichen das Einfügen eines Bildes aus der Zwischenablage, und Drag-and-Drop auf einen Canvas kann über die Entwicklerkonsole verdrahtet werden. Für ernsthaftes Bild-Annotieren - Screenshots mit Pfeilen, Produkt-Mockups mit Redlines - ist ein zweckgebundenes Markup-Werkzeug wie Skitch, CleanShot X oder macOS-Screenshot-Markup besser geeignet. Dieses Whiteboard zielt auf die Leere-Canvas-Skizzierung ab.

Verwandte Tools

Mehr Productivity

Cover Letter Generator

Generate professional cover letters from a fill-in template with your details and experience.

Open tool

Email Signature Generator

Generate professional HTML email signatures with contact details and social links.

Open tool

Flashcard Maker

Create and study flashcards with front/back content, shuffle, and navigation.

Open tool

Grammar Checker

Check text for double spaces, repeated words, misspellings, capitalization, and passive voice.

Open tool

Invoice Generator

Create professional invoices with line items, tax calculation, and printable output.

Open tool

Markdown Table Generator

Build a Markdown table interactively. Add rows and columns, set per-column alignment and copy the GitHub-flavoured output.

Open tool
ZeroUtil unterstützen