J'ai ce morceau de code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <script>      
        window.addEventListener('load', () => {
            document.getElementById("c").width = document.documentElement.clientWidth;
            document.getElementById("c").height = document.documentElement.clientHeight;
        })
    </script>
  </head>
  <body style="margin: 0;">
    <canvas id="c" style="background-color: red;"></canvas>
  </body>
</html>

Pourquoi génère-t-il un canevas plus grand que la fenêtre d'affichage du navigateur et crée-t-il une barre de défilement ? Et à côté de cela, il fait un espace blanc sous la toile. Pourquoi et comment le résoudre ? Merci!

2
Petr Marek 2 nov. 2020 à 23:30

1 réponse

Meilleure réponse

Par défaut, l'affichage du canevas est défini sur display: inline;
Vous n'avez qu'à régler l'affichage de votre toile sur display: block;

<!DOCTYPE html>
<html lang="en">
  <head>
    <script>      
        window.addEventListener('load', () => {
            document.getElementById("c").width = document.documentElement.clientWidth;
            document.getElementById("c").height = document.documentElement.clientHeight;
        })
    </script>
  </head>
  <body style="margin: 0;">
    <canvas id="c" style="background-color: red; display: block;"></canvas>
  </body>
</html>
3
Scott Marcus 2 nov. 2020 à 20:42