Hallo miteinander!

Bevor mich die "Besonderheiten" des <canvas> Elements noch endgültig in den Wahnsinn treiben, wende ich mich mal an euch mit meinem Problem, bei dem die Ausgangslage wiefolgt ist:

Ein <canvas> Element ist in ein Elternelement eingebettet, welches eine initiale height und width von 500x500px sowie eine min-height und min-width von 500x500px hat und welches mittels resize: both über dieses Minimum hinaus frei skaliert, sowie auch per drag-and-drop frei positioniert werden kann.

Das <canvas> Element selbst sollte stets eine Höhe haben von 100% der Höhe des Elternelments minus 85px und eine Breite von 100% des Elternelements minus 20px.

Wäre das CANVAS also ein "normales" Element sollte das in etwa so aussehen:

#parent {  
  
  min-width: 500px;  
  min-height: 500px;  
  width: 500px;  
  height: 500px;  
  resize: both  
  
}  
  
#parent > canvas {  
  
  min-width: 480px;  
  min-height: 415px;  
  width: calc(100% - 20px);  
  height: calc(100% - 85px)  
  
}

Aber das funktioniert natürlich nicht, weshalb die Höhen - und Breitenangabe für das CANVAS zunächst mal so aussieht: canvas.width = 480; und canvas.height = 415;

Das 'resize'-Event ist zwar eine sehr nützliche Sache, wenn man die Größe des CANVAS relativ zum Browserfenster skalieren will (zumindest über Umwege), aber auf ein "resize" des Elternelementes reagiert es meines Wissens nach nicht...

Die Frage ist also, was ist die beste Möglichkeit, das angestrebte Ziel zu erreichen? :-/

PS: Dass der CANVAS-Kontext bei resize zurückgesetzt wird ist mir klar, aber das ist hier unerheblich, da hier wohl ohnehin nur eine JS-Lösung in Betracht kommt und ich dann dementsprechend die DRAW-Funktion über requestAnimationFrame neu aufrufen würde...

Gruß

var