2

var c = document.getElementById("canvas");

function w() {return c.width;}

function h() {return c.height;}



var p = new PIXI.autoDetectRenderer(w(),h(),{view: c});
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
   <script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.5.3/pixi.min.js"></script>
  
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <canvas width="100%" height="100%" id="canvas"></canvas>
</body>
</html>

Intento devolver el width del canvas 100% pero me devuelve 100px, porque necesito usarlo en pixijs

2 respuestas 2

1

Podrías usar element.getAttribute.

devuelve el valor del atributo especificado en el elemento. Si el atributo especificado no existe, el valor retornado puede ser tanto null como "" (una cadena vacía)

Así por ejemplo:

var c = document.getElementById("canvas");

function w() {
  console.log(c.getAttribute('width'));
  return c.getAttribute('width');
}

function h() {
  console.log(c.getAttribute('height'));
  return c.getAttribute('height');
}



var p = new PIXI.autoDetectRenderer(w(), h(), {
  view: c
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.5.3/pixi.min.js"></script>
<canvas width="100%" height="100%" id="canvas"></canvas>

1

El problema es que los atributos width y height no aceptan unidades y siempre se consideran pixeles.

Para que el elemento canvas ocupe el ancho y el alto completo de la ventana con PixiJS, tedrás que pasarle sus valores:

var p = new PIXI.autoDetectRenderer(
    window.innerWidth,     //ancho de la ventana
    window.innerHeight,    //alto de la ventana
    {view: c}
);

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.