Comment centrer le canevas en HTML5

105

Je cherche une solution depuis un moment maintenant, mais je n'ai rien trouvé. C'est peut-être juste mes termes de recherche. Eh bien, j'essaie de faire le centre du canevas en fonction de la taille de la fenêtre du navigateur. La toile mesure 800x600. Et si la fenêtre descend en dessous de 800x600, elle devrait également être redimensionnée (mais ce n'est pas très important pour le moment)

html canvas css resize Jorgen
la source

Comment lui dire de créer un canevas pleine page sans donner de dimensions et sans avoir de barres de défilement lors du redimensionnement?

jorgen

2

Ne pas le faire en HTML .. faire avec javascript, utilisez des trucs comme appendChild ou quelque chose et la largeur et la hauteur de jeu window.innerWidth et window.innerHeight

le Jinx

173

Attribuez au canevas les propriétés de style css suivantes:

canvas {
    padding-left: 0;
    padding-right: 0;
    margin-left: auto;
    margin-right: auto;
    display: block;
    width: 800px;
}

Éditer

Étant donné que cette réponse est très populaire, permettez-moi d'ajouter un peu plus de détails.

Les propriétés ci-dessus centreront horizontalement le canevas, le div ou tout autre nœud que vous avez par rapport à son parent. Il n'est pas nécessaire de modifier les marges et les rembourrages supérieurs ou inférieurs. Vous spécifiez une largeur et laissez le navigateur remplir l'espace restant avec les marges automatiques.

Cependant, si vous voulez taper moins, vous pouvez utiliser les propriétés de raccourci css que vous souhaitez, telles que

canvas {
    padding: 0;
    margin: auto;
    display: block;
    width: 800px;
}

Centrer la toile verticalement nécessite cependant une approche différente. Vous devez utiliser un positionnement absolu et spécifier à la fois la largeur et la hauteur. Définissez ensuite les propriétés gauche, droite, haut et bas sur 0 et laissez le navigateur remplir l'espace restant avec les marges automatiques.

canvas {
    padding: 0;
    margin: auto;
    display: block;
    width: 800px;
    height: 600px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

Le canevas se centre lui-même en fonction du premier élément parent positiondéfini sur relativeou absolute, ou du corps si aucun n'est trouvé.

Une autre approche serait d'utiliser display: flex, qui est disponible dans IE11

Assurez-vous également d'utiliser un doctype récent tel que xhtml ou html 5.

Marco Luglio
la source

8

bloc de visualisation; et marge: 0 auto 0 auto; suffit aussi. THX!

Chris

Pour centrer verticalement un canevas, vous n'avez pas besoin de mettre la largeur et la hauteur, tant que vous les spécifiez dans le HTML. Sur le chrome, de toute façon.

Zac

1

La largeur et la hauteur peuvent être spécifiées en css ou html. Mais css est la méthode recommandée car toute la logique de présentation doit y aller.

Marco Luglio le

1

Il centre la toile mais s'il y a une image dessinée sur la toile, elle s'étire. Pouvez-vous centrer la toile sans étirer l'image

aryen

La définition de la hauteur et de la largeur dans les styles en ligne sur l'élément de toile a gâché les tailles de mes images dessinées et autres. Juste une mise en garde qui, espérons-le, épargnera à quelqu'un une certaine frustration.

MrBoJangles

52

Vous pouvez donner à votre canevas les propriétés CSS ff:

#myCanvas
{
    display: block;
    margin: 0 auto;
}

Jinmichaelr
la source

Pouvez-vous fournir un jsfiddle? Cette approche ne semble pas fonctionner

jose.angel.jimenez

3

Cela fonctionne pour le centrage horizontal, mais pas pour le centrage vertical.

Matty J

20

Centrez simplement le div en HTML:

  #test {
     width: 100px;
     height:100px;
     margin: 0px auto;
     border: 1px solid red;
   }


<div id="test">
   <canvas width="100" height="100"></canvas>
</div>

Changez simplement la hauteur et la largeur en n'importe quoi et vous avez un div centré

http://jsfiddle.net/BVghc/2/

JoeCianflone
la source

Heureusement, j'en avais besoin peu de temps après que vous l'avez posté. :)

mcandre

5

Cela ne fonctionne pas si le canevas est plus petit que le conteneur.

SystemicPlural

8

Pour centrer l'élément de canevas horizontalement, vous devez le spécifier en tant que niveau de bloc et laisser ses propriétés de marge gauche et droite au navigateur:

canvas{
    margin-right: auto;
    margin-left: auto;
    display: block;
}

Si vous souhaitez le centrer verticalement, l'élément canvas doit être positionné de manière absolue:

canvas{
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);              
}

Si vous souhaitez le centrer horizontalement et verticalement, faites:

canvas{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);               
}

Pour plus d'informations, visitez: https://www.w3.org/Style/Examples/007/center.en.html

Konkret
la source

5

Les réponses ci-dessus ne fonctionnent que si votre toile a la même largeur que le conteneur.

Cela fonctionne indépendamment:

#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>

Développer l'extrait

SystémiquePluriel
la source

3

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>

Keyur Patel
la source

2

J'ai eu le même problème, car j'ai des images avec de nombreuses largeurs différentes que je charge uniquement avec des informations de hauteur. La définition d'une largeur permet au navigateur d'étirer et de presser l'image. Je résous le problème en centrant la ligne de texte juste avant la ligne image_tag (en supprimant également float: left;). J'aurais aimé que le texte soit aligné à gauche, mais c'est un inconvénient mineur, que je peux tolérer.

MDM
la source

0

Ajouter text-align: center;à la balise parent de <canvas>. C'est tout.

Exemple:

<div style="text-align: center">
    <canvas width="300" height="300">
        <!--your canvas code -->
    </canvas>
</div>

Raj Yadav
la source

c'est simple alors en utilisant css

Clifton Avil D'Souza

Comment centrer le canevas en HTML5

Réponses: