var: Resize von canvas-Element abhängig von parent-Element

Beitrag lesen

Hakuna matata!

Hallo!

[...]Nach Standard ist dem eben nicht so. Aber du kannst nicht erwarten, dass beim Vergrößern des <canvas> automatisch etwas neu gezeichnet wird. Bereiche die vor der Vergrößerung nicht bemalt waren, sind auch danach unbemalt, bis du etwas darauf kritzelst.

Das ist doch dann genau der Punkt. ;-)

Selbst wenn dem so wäre, wie du sagst: Wenn ich (über requestAnimationFrame) meine draw-function aufrufe, muss ich (zumindest in WebGL) für das renderingContextObject den viewport festlegen, in der Regel also...

var ctx = WebGLRenderingContextObject;  
  
ctx.viewportWidth = canvas.width;  
ctx.viewportHeight = canvas.height;  
  
ctx.viewport(0, 0, ctx.viewportWidth, ctx.viewportHeight);

...wenn die volle Größe des canvas bemalt werden soll, und das funktioniert nur mit Pixelangaben in Ganzzahlen, nicht mit sowas wie calc(100% - 20px), weshalb ich hier nicht schreiben kann ctx.viewportWidth = canvas.style.width.

Und der Wert für das Elementattribut width bzw. height wird durch die Angabe in CSS gerade mal gar nicht tangiert. Wenn ich es in CSS so schreibe wie im Beispiel und für canvas.width/height keine Angaben mache, bleibt canvas.width = 300 und canvas.height = 150 bestehen. Da findet keine automatische Anpassung statt.

Gruß

var