Cela fait un moment que je cherche une solution, mais je n'ai rien trouvé. Peut-être que c'est juste mes termes de recherche. J'essaie de centrer la toile en fonction de la taille de la fenêtre du navigateur. La toile est de 800x600. Et si la fenêtre devient inférieure à 800x600, elle devrait également être redimensionnée (mais ce n'est pas très important pour le moment).
Les réponses ci-dessus ne fonctionnent que si votre toile est de la même largeur que le conteneur.
Cela marche quand même :
#container {
width: 100px;
height:100px;
border: 1px solid red;
margin: 0px auto;
text-align: center;
}
#canvas {
border: 1px solid blue;
width: 50px;
height: 100px;
}
<div id="container">
<canvas id="canvas" width="100" height="100"></canvas>
</div>
Utilisez ce code :
<!DOCTYPE html>
<html>
<head>
<style>
.text-center{
text-align:center;
margin-left:auto;
margin-right:auto;
}
</style>
</head>
<body>
<div class="text-center">
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
Your browser does not support the HTML5 canvas tag.
</canvas>
</div>
</body>
</html>
J'ai eu le même problème, car j'ai des images avec de nombreuses largeurs différentes que je ne charge qu'avec des informations de hauteur. Le fait de définir une largeur permet au navigateur d'étirer et de comprimer l'image. Je résous le problème en centrant la ligne de texte juste avant la ligne image_tag (en me débarrassant également de float : left ;). J'aurais aimé que le texte soit aligné à gauche, mais c'est un inconvénient mineur, que je peux tolérer.
Utilisation de la grille ?
const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, canvas.width, canvas.height);
body, html {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
background-color: black;
}
body {
display: grid;
grid-template-rows: auto;
justify-items: center;
align-items: center;
}
canvas {
height: 80vh;
width: 80vw;
display: block;
}
<html>
<body>
<canvas></canvas>
</body>
</html> Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.
0 votes
Comment puis-je lui dire de faire une toile pleine page sans donner de dimensions et sans avoir de barres de défilement lors du redimensionnement ?
2 votes
Ne le faites pas en HTML faites-le en javascript, utilisez des trucs comme appendChild ou autre et définissez la largeur et la hauteur à window.innerWidth et window.innerHeight.