Canvas - HTML5 - page 175

Der Nachteil dieser Methode sind die zum Teil empfindlich langen URLs (wir
erinnern uns an die 1,3 Millionen Zeichen ...) und die Tatsache, dass Bilder
dieser Form nicht im Cache landen und damit bei jedem Aufruf neu erzeugt
werden müssen. Weitere Einsatzmöglichkeiten für toDataURL() bieten sich bei
localstorage oder XMLHttpRequest und erlauben das Speichern sowie Abfra-
gen von erstellten Canvas-Grafiken sowohl auf dem Client als auch auf dem
Server. Auch beim Erstellen von CSS-Stilen mit background-image oder list-
style-image leistet toDataURL() gute Dienste und darf als url() -Wert einge-
setzt werden.
5.13 „save()« und »restore()«
Unsere Reise durch den CanvasContext2D nähert sich schon langsam dem Ende,
denn mit context.save() und context.restore() warten nur noch zwei Metho-
den darauf, erklärt zu werden. Ohne sie könnte wohl kaum eine komplexere
Canvas-Grafik auskommen - wer schon den einen oder anderen Blick in den
Source-Code der Abbildungen gewagt hat, der kann dies sicher bestätigen. Da-
mit Sie context.save() und context.restore() besser verstehen können, müs-
sen wir allerdings kurz ausholen.
Mit dem Definieren des Zeichenkontextes durch canvas.getContext('2d') wer-
den für alle Attribute Defaultwerte gesetzt, die dann beim Zeichnen unmittel-
bar wirksam sind:
context.globalAlpha = 1.0;
context.globalCompositeOperation = 'source-over';
context.strokeStyle = 'black';
context.fillStyle = 'black';
context.lineWidth = 1;
context.lineCap = 'butt';
context.lineJoin = 'miter';
context.miterLimit = 10;
context.shadowOffsetX = 0;
context.shadowOffsetY = 0;
context.shadowBlur = 0;
context.shadowColor = 'rgba(0,0,0,0)';
context.font = '10px sans-serif';
context.textAlign = 'start';
context.textBaseline = 'alphabetic';