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

[1UnitedPower]

Hakuna matata!

Also bei mir funktioniert das so, wie du erwarten würdest: http://jsfiddle.net/pox2cu3v/

Hehe, ja, solange die Leinwand weiß ist. ;-)

Aber bedenkte: canvas.width/height != canvas.style.width/height.

Zumindest laut Standard sind die CSS-Eigenschaften ausschlaggebend für die Bitmap-Dimensionen des canvas'. Ich zitiere:

A canvas element can be sized arbitrarily by a style sheet, its bitmap is then subject to the 'object-fit' CSS property. [CSSIMAGES]

Und object-fit ist standardmäßig fill.

Es müssen die Werte für die Attribute width und height verändert werden, keine style-Eigenschaften, sonst bleibt die Auflösung bei den für jedes CANVAS initial angesetzten 300 x 150px, und diese 300 x 150px werden dann nur auf den per CSS gesetzten Wert gestretcht.

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.