Lienzo dinámico con processing

[Garot]

Buenas a todos!

Estoy comenzando con processing y processing.js ya que lo que más me interesa es utilizarlo para la web. Me parece fantástico lo que se puede hacer con esta librería.....pero ya me surgió una duda fatal que espero que alguien sepa responderme.

Ya que processing.js está pensado para ser utilizado en la web, la pregunta es: ¿hay alguna manera de hacer adaptable el tamaño del lienzo y el canvas para los diferentes formatos de pantallas?.

O dicho de otra manera ¿como se puede adaptar de manera dinámica el tamaño del canvas y el size del lienzo donde trabaja processing.js para que se adapte a las pantallas de los diferentes dispositivos web?

He leído algo de la documentación pero parece no haber una opción para esto, si alguien sabe alguna alternativa o truco se lo agradezco desde ya!

Saludos!

[ClubIce]

Pues básicamente lo que tienes que hacer es crear un nuevo canvas con las medidas que necesitas y reemplazarlo por el que estas utilizando actualmente

[Garot]

Hola Clubice, muchas gracias por la respuesta, si no me equivoco vos decis de detectar el tipo de dispositivo y de ahi redireccionar a una página con el Canvas en su tamaño apropiado.

Pero yo pregunto si hay alguna manera de que se vaya adaptando dinámicamente como lo hacen los divs cuando tienen el tamaño expresado en porcentaje....nose si me explico? que a medida que voy reduciendo la ventana del navegador se va adaptando.

[hackjose]

debes usar responsive web design.

@media(max-width min-width)
{
medida del canvas
}

y pintar con porcentajes en el canvas, me refiero a:

canvas.width / 100;
canvas.height / 100;

Saludos

[Garot]

Hola Hackjose, gracias loco, estuve probando lo que me dijiste, pero hay un pequeño problema:

También necesito actualizar el tamaño del size que esta configurado en el void setup() del código processing. Sino lo que pasa es que redimensiono la pantalla y el dibujo se deforma o se pixela pero no se redibuja hasta que le doy F5

Y no encuentro manera de actualizar ese valor, ya que el size tiene que ser definido si o si en el void setup() y se ejecuta una sola vez

[hackjose]

Eso es lo que no me gusta de canvas, que hay que redibujar todo.

La solucion que encuentro es esta

usa la propiedad availwidth y availheight del objeto screen para conocer el tamaño disponible para el navegador y dependiendo de esto dibujas el canvas.

Tambien puedes usar el evento onresize para detectar cuando el usuario cambia el tamaño de la pagina hasta aqui hemos detectado el cambio de tamaño, para saber el tamaño puedes usar las propiedades innerWidth e innerHeight del objeto window y dependiendo de estas redibujas el canvas, por ejemplo

if(window.onresize)
{
width = window.innerWidth;
height = window.innerHeight;
ctx = document.getElementById("canvas").getContext('2d') ;
ctx.clearRect(ctx.width,ctx.height);
ctx.width = nuevo tamaño;
ctx.height = nuevo tamaño;
ctx.redibujar
}

Es algo largo pero creo que lo soluciona

La otra opcion que veo mas fiable es usar SVG

Saludos

[Garot]

Bueno Hackjose muchas gracias por la ayuda!! seguiré probando...y si consigo algún resultado postearé aquí las novedades....saludos!