Cómo centrar el lienzo en html5

105

He estado buscando una solución durante un tiempo, pero no he encontrado nada. Quizás sean solo mis términos de búsqueda. Bueno, estoy tratando de hacer que el lienzo se centre de acuerdo con el tamaño de la ventana del navegador. El lienzo es de 800x600. Y si la ventana está por debajo de 800x600, también debería cambiar de tamaño (pero eso no es muy importante en este momento)

html canvas css resize jorgen
fuente

¿Cómo le digo que haga un lienzo de página completa sin dar dimensiones y sin tener barras de desplazamiento al cambiar el tamaño?

jorgen

2

No lo hagas en HTML ... hazlo con javascript, usa cosas como appendChild o algo y establece el ancho y el alto en window.innerWidth y window.innerHeight

the JinX

173

Dé al lienzo las siguientes propiedades de estilo CSS:

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

Editar

Dado que esta respuesta es bastante popular, permítanme agregar un poco más de detalles.

Las propiedades anteriores centrarán horizontalmente el lienzo, div o cualquier otro nodo que tenga en relación con su padre. No es necesario cambiar los márgenes ni los rellenos superior o inferior. Usted especifica un ancho y deja que el navegador llene el espacio restante con los márgenes automáticos.

Sin embargo, si desea escribir menos, puede usar las propiedades abreviadas de CSS que desee, como

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

Sin embargo, centrar el lienzo verticalmente requiere un enfoque diferente. Debe utilizar el posicionamiento absoluto y especificar tanto el ancho como el alto. Luego, establezca las propiedades izquierda, derecha, superior e inferior en 0 y deje que el navegador llene el espacio restante con los márgenes automáticos.

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

El lienzo se centrará en función del primer elemento padre que se haya positionestablecido en relativeo absolute, o el cuerpo si no se encuentra ninguno.

Otro enfoque sería utilizar display: flex, que está disponible en IE11

Además, asegúrese de utilizar un tipo de documento reciente, como xhtml o html 5.

Marco Luglio
fuente

8

bloqueo de pantalla; y margen: 0 auto 0 auto; es suficiente también. ¡Gracias!

Chris

Para centrar verticalmente un lienzo, no es necesario que ingrese el ancho y el alto, siempre que lo especifique en el HTML. En cromo, de todos modos.

Zac

1

El ancho y el alto se pueden especificar en css o html. Pero css es la forma recomendada ya que toda la lógica de presentación debería ir allí.

Marco Luglio

1

Está centrando el lienzo, pero si hay una imagen dibujada en el lienzo, se está estirando. ¿Puedes centrar el lienzo sin estirar la imagen?

aryan

Establecer la altura y el ancho en los estilos en línea en el elemento de lienzo arruinó los tamaños de mis imágenes dibujadas y demás. Solo una advertencia que, con suerte, le ahorrará a alguien algo de frustración.

MrBoJangles

52

Puede darle a su lienzo las propiedades CSS ff:

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

jinmichaelr
fuente

¿Puede proporcionar un jsfiddle? Este enfoque no parece funcionar

jose.angel.jimenez

3

Esto funciona para el centrado horizontal, pero no para el centrado vertical.

Matty J

20

Simplemente centra el 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>

Simplemente cambie la altura y el ancho a lo que sea y tendrá un div centrado

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

JoeCianflone
fuente

Por suerte, necesitaba esto poco después de que lo publicaras. :)

mcandre

5

Esto no funciona si el lienzo es más pequeño que el contenedor.

SystemicPlural

8

Para centrar el elemento de lienzo horizontalmente, debe especificarlo como un nivel de bloque y dejar sus propiedades de margen izquierdo y derecho al navegador:

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

Si desea centrarlo verticalmente, el elemento de lienzo debe estar absolutamente posicionado:

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

Si desea centrarlo horizontal y verticalmente, haga:

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

Para obtener más información, visite: https://www.w3.org/Style/Examples/007/center.en.html

Konkret
fuente

5

Las respuestas anteriores solo funcionan si su lienzo tiene el mismo ancho que el contenedor.

Esto funciona independientemente:

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

Expandir fragmento

Sistémico Plural
fuente

3

Utilice este código:

<!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
fuente

2

He tenido el mismo problema, ya que tengo imágenes con muchos anchos diferentes que cargo solo con información de altura. Establecer un ancho permite al navegador estirar y contraer la imagen. Resuelvo el problema al tener la línea de texto justo antes de la línea image_tag centrada (también me deshago de float: left;). Me hubiera gustado que el texto estuviera alineado a la izquierda, pero esto es un inconveniente menor que puedo tolerar.

MDM
fuente

0

Agregue text-align: center;a la etiqueta principal de <canvas>. Eso es.

Ejemplo:

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

Raj Yadav
fuente

esto es simple y luego usa css

Clifton Avil D'Souza

Cómo centrar el lienzo en html5

Respuestas: