HTML Canvas: Wo ist mein Fehler?
HTML:
<canvas id="screen" style="width:200px; height:200px;"></canvas>
JS:
const canvas = document.getElementById("screen");
const ctx = canvas.getContext("2d");
ctx.fillStyle = "green";
ctx.fillRect(0, 0, 80, 80);
Das sollte ein grünes Quadrat malen. Jedoch bekomme ich ein grünes Rechteck, das doppelt so hoch ist wie breit.
Warum?
Was mache ich falsch / Was habe ich übersehen?
Hier ein JSFiddle: https://jsfiddle.net/7cenmwh5/2/
2 Antworten
Wenn du mit CSS die Größe des Canvas setzt, dann gibt es Skalierungsprobleme. Du musst diese direkt auf dem Element setzen. So:
Geht gleichzeitig auch, wenn du das Canvas-Element nochmal unabhängig von seiner internen Fläche skalieren willst. Die ist standardmäßig aber 150 mal 300 Pixel, also rechteckig. Mit CSS änderst du nur, wie diese 150 mal 300 Pixel angezeigt werden (sie werden also gestaucht und gestreckt).
Ahhh, deswegen war es Rechteckig und unscharf, das macht Sinn :D
Witzig... aber so gehts
const canvas = document.getElementById("screen");
const ctx = canvas.getContext("2d");
ctx.fillStyle = "green";
ctx.fillRect(0, 0, 80, 40);
Stimmt. Ist mir auch aufgefallen.
0,0 ist x und y.
Und 80, 80 sind Breite und Höhe. Sollte doch Quadratisch sein, ich verstehs nicht :D
Achsoooo, ich dachte per Style-Tag. Hatte das falsch in Erinnerung.
Danke dir :D