Vorhaben _NICHT_ sinnlos / canvas frei skalieren - how to

[Roadster]

Ahoi. ;)

Also, nur für's Archiv und den Fall, dass jemand vor der gleichen Problemstellung steht, und zwar ein <canvas> Element, dass als Wert für width und height keine Prozentangaben sondern nur Angaben in px als absolute Zahl annimmt, trotzdem relativ zum Browserfenster frei skalieren zu können:

Hierzu muss man zunächst mit...

var innerWidth = window.innerWidth ||  
                 document.documentElement.clientWidth ||  
                 document.body.clientWidth;  
  
var innerHeight = window.innerHeight ||  
                  document.documentElement.clientHeight ||  
                  document.body.clientHeight;

...äquivalente Werte zu...

html {  
  
  width: 100%;  
  height: 100%;  
  
}  
  
body {  
  
  width: 100%;  
  height: 100%;  
  
}

...in px als absolute Zahl in einer Variablen speichern und diese Werte dann für eine beliebige window.size [ n ] an die anderen (aufgrund prozentualer Breiten- und Höhenangaben) frei skalierbaren Elemente anpassen, so dass das <canvas> relativ zu diesen die richtige Größe hat, was recht einfach zu bewerkstelligen ist, indem man einfach step by step die Höhen- und Breitenangaben der parentElements nachvollzieht, z.B.:

innerWidth == html/body

parent_1 = 90% von html/body  ---> p1width == calc(( innerWidth / 100 ) * 90 )
parent_2 = calc( 70% + 12px )  ---> p2width == calc(( p1width / 100 ) * 70 ) + 12 usw...

canvasWidth == p2width - 10; ...plus ein wenig Feinjustierung. ;)

Alles was man dann noch tun muss, ist einen Event-Listener zu schalten...

window.addEventListener( 'resize', function ( ) {  
  
/* ...in dessen Zielfunktion die Variablen der Werte für canvas.width und canvas.height  
      aktualisiert (oder neu angelegt) werden... */  
  
/* ...und dann die entsprechende DRAW_Funktion für das canvas neu aufgerufen wird... */  
  
});

...and that's it!

Eigentlich easy, aber wer kennt schon das Event resize ?  ;)

Gruß,

Roadster.