El canva no se ajusta a la pantalla

sirdaiz · #1 (**permalink**) 04/05/2012, 04:59

Hola tengo el sgte codigo index.html

Código HTML:

Ver original<head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" type="text/css" href="estilo.css"/>
    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script src="script.js"></script>
    <title>Title of the document</title>
</head>
 
......
 
<footer>
    <canvas id="canva1">
    </canvas>
</footer>

y script.js

Código Javascript:

Ver original$(document).on("ready",configurarApp);
 
function configurarApp(){
    var canvas =document.getElementById("canva1");
    var cxt=canvas.getContext("2d"):
    canvas.width= screen.availWidth;
}

y estilo.css

Código CSS:

Ver original#canva1{
    border:solid;
    position:absolute;
    bottom:0px;
}

Pero el borde no se ajusta a toda la pantalla, alguien sabe el porque peude ser?

Gracias

ryugen · #2 (**permalink**) 04/05/2012, 05:09

podrias probar con:

Código Javascript:

Ver originalcanvas.width = $(window).width();

Con eso obtendrás el ancho del navegador.

sirdaiz · #3 (**permalink**) 04/05/2012, 05:13

Gracias por tu respuesta, lo he probado eso ahora y nada, parece que el .js no me lo coge pero lo tengo al mismo nivel que el index :(

ryugen · #4 (**permalink**) 04/05/2012, 06:18

el canvas tiene algun CSS aplicado?

sirdaiz · #5 (**permalink**) 04/05/2012, 06:19

Si en el 1º post esta el css aplicado

Saludos

ryugen · #6 (**permalink**) 04/05/2012, 07:34

y cual es el valor de

Código Javascript:

Ver original$(window).width()

al ejecutarse la funcion : configurarApp().

Obtenelo con un breakpoint ahi o loguealo en la consola. O en el peor de los casos mostratelo con un alert()

sirdaiz · #7 (**permalink**) 04/05/2012, 10:12

Cita:

Iniciado por ryugen

y cual es el valor de

Código Javascript:

Ver original$(window).width()

al ejecutarse la funcion : configurarApp().

Obtenelo con un breakpoint ahi o loguealo en la consola. O en el peor de los casos mostratelo con un alert()

Hola bien, he de decir antes que nada, que tengo puesto nada mas entrar en la funcion un alert que diga hola y no me lo muestra :(

Gracias por la ayuda

chwc · #8 (**permalink**) 05/05/2012, 18:28

mira, primero deberias hacer que canvas sea una variable global

Código Javascript:

Ver original$(document).on("ready",configurarApp);
 var canvas,ctx;
function configurarApp(){
canvas =document.getElementById("canva1");
    cxt=canvas.getContext("2d"):
    canvas.width= screen.availWidth;
}

saludossss
ss

s

sirdaiz · #9 (**permalink**) 07/05/2012, 01:58

Hola lo he probado tb pero nada, he puesto:

Código Javascript:

Ver originalvar canvas,ctx;
function configurarApp(){
    alert("hola");
    canvas =document.getElementById("canva1");
        cxt=canvas.getContext("2d"):
        canvas.width= screen.availWidth;
 
}

Pero ni siqueire me salta el alert :(

Saludos

daPhyre · #10 (**permalink**) 07/05/2012, 15:58

No quiero resaltar lo obvio, pero de casualidad no has removido esa primer línea que llama al onReady ¿Verdad?

No se mucho de Jquery, pero lo he probado de la forma tradicional y no tengo problemas:

Código Javascript:

Ver originalwindow.addEventListener('load',configurarApp,false);

Suerte

caotz · #11 (**permalink**) 08/05/2012, 07:59

Creo que tu problema esta a la hora de llamar la función:

Tu lo tienes asi:
$(document).on("ready",configurarApp);

Te faltan paréntesis al final
$(document).on("ready",configurarApp());

daPhyre · #12 (**permalink**) 08/05/2012, 14:53

Cita:

Iniciado por caotz

Creo que tu problema esta a la hora de llamar la función:

Tu lo tienes asi:
$(document).on("ready",configurarApp);

Te faltan paréntesis al final
$(document).on("ready",configurarApp());

No se si con Jquery funcione diferente, pero casi siempre que se llama asigna una función a otra función, se hace sin paréntesis

alaez90 · #13 (**permalink**) 25/01/2013, 17:58

Yo tenia el mismo problema y la solucion fue facil:
Puse un disco de Vivaldi y lo logré.
En realidad fue porque no estaba todo bien escrito, revisa todo de cabo a rabo. Y recuerda en Vivaldi hallarás la solución. Suerte XD

alaez90 · #14 (**permalink**) 25/01/2013, 18:00

o prueba con jquery 1.8.0