JavaScript (html) Element zentrieren?

03.03.2023, 16:34 
body {
       display: flex;
       justify-content: center;
       align-items: center;
       height: 100vh;
       margin: 0;
     } 

 var canvas = document.createElement("canvas");
canvas.width = map.clientWidth;
canvas.height = map.clientHeight;

2 Antworten

Vom Beitragsersteller als hilfreich ausgezeichnet
regex9
Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer
HTML, Webseite, CSS
03.03.2023, 20:27

Im Hinblick auf die von dir geteilten Informationen ist map undefiniert und das canvas-Element wird dem Dokument nicht zugefügt.

Wenn man map als eigene existierende Box versteht, könnte eine Lösung folgendermaßen aussehen:

<!doctype html>
<head>
  <title>Example</title>
  <style>
    body {
      align-items: center;
      display: flex;
      height: 100vh;
      justify-content: center;
      margin: 0;
    }

    canvas {
      border: 1px solid; /* only for demo */
    }

    #map {
       height: 200px;
       width: 200px;
    }
  </style>
</head>
<body>
  <div id="map"></div>
  <script>
    const map = document.getElementById("map");
    const canvas = document.createElement("canvas");
    canvas.width = map.clientWidth;
    canvas.height = map.clientHeight;
    map.appendChild(canvas);
  </script>
</body>

Die Flexbox zentriert das div-Element. Letzterem wird auch via appendChild-Methode das canvas-Element angehängt. Wichtig ist außerdem, dass das div-Element via CSS eine spezifische Höhe und Breite zugeordnet wird, andernfalls würden die Properties clientWidth und clientHeight nur 0 zurückgeben.
Mirko Marek
Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer
Mediengestalter Digital und Print
12.03.2023, 17:30

Hey,

du hast vergessen die CSS-Eigenschaft 'width' anzugeben.

Woher ich das weiß:Berufserfahrung – Ich bin gelernter Mediengestalter Digital und Print(IHK)