SVG ist besser als Canvas

[j4nk3y]

Hey,

Das hatten wir vor ein paar Wochen schon im Forum. Ich hab's für mich so verstanden, dass es Pixel sind die dann entsprechend skaliert werden. @Gunnar Bittersmann hat gemeint, dass es einheitenlose Längeneinheiten des Koordinatensystems sind.

Hm.

Da man z.B für stroke-with als Attribut keine Einheit setzt, als CSS aber dann doch eine Einheit zum Wert hinzufügen muss (meist dann doch px) bleib ich bei Pixel für mich.

Und die gleiche frage stellt sich eigentlich auch bei der Canvas Methode.

Genauer moveTo(x,y) oder lineTo(x,y)? Pixel ist es nicht und Prozent auch nicht. Bin etwas ratlos.

Naja, wenn man sich die Beispiele anschaut mit z.B. <path d="M50,50 H100" stroke="#5a9900" /> und der Container bei mir nur etwa 40 Px breit ist, ist es eben schon komisch. Klar es ist eine Vektorgrafik und durch width und height wird das ganze skaliert aber ein Ansatz punkt wäre gut, da ich es grad nicht schaffe ... Hm da fällt mir...

Stunden später…

Also, ich bin mittlerweile soweit, dass ich herausgefunden habe, dass,:

var canvas = document.getElementById('style_element_right');
var context = canvas.getContext('2d');
			
context.beginPath();
context.moveTo(0, 0); // obere linke Ecke
context.lineTo(0, 150); // untere linke Ecke
context.lineTo(300, 150); // untere rechte Ecke
context.lineTo(300, 0); // obere rechte Ecke
			
context.closePath();
context.lineWidth = 1;
context.fillStyle = color;
context.fill();
context.strokeStyle = 'transparent';
context.stroke();

diese Koordinaten immer (jedenfalls bei mir nach einigen Versuchen), egal wie width und height definiert sind, die Eckpunkte eines Containers sind.

Gruß
Jo