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

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

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