1

Estoy haciendo una web, tengo un código externo en canvas (una bola del mundo que se mueve), y para ponerle el texto encima normal, sólo me deja hacerlo poniéndole una posición absoluta al canvas, (lo que genera que body, ya no sea el padre, y me hace un gran espacio en blanco al final del todo...) os pondría el código, pero es grandecito...

¿Alguien sabe alguna manera de poner un código canvas de fondo, para añadir texto por encima de "esa capa", sin usar posición absoluta?

Gracias por la ayuda por adelantado,

6
  • ¿Con posición absoluta te refieres a position: fixed;? Te recomiendo que completes el recorrido de bienvenida para entender por qué es mejor que crees un ejemplo mínimo verificable Commented el 20 jun. 2019 a las 16:08
  • podrias usar algo como esto....style="position:fixed; top:0;left:0" Commented el 20 jun. 2019 a las 21:03
  • Muchas gracias por responder, he probado con: .canvas2{ position: fixed; width: 100%; height: auto; } #canvasOne2{ position: relative; z-index: -10000; }; -------> lo que hace que no me sobre espacio al final, perooo tampoco me aparecen el resto de secciones que yo tengo añadidas a la web, y en consecuencia, no me sirve esta opción... Commented el 21 jun. 2019 a las 8:22
  • 1
    Hola Elena, por favor añade el código relacionado con la pregunta para que podamos verlo. De lo contrario la pregunta pueda acabar cerrada al no contener la información necesaria para ayudarte. Lee Cómo preguntar y cómo crear un ejemplo mínimo verificable para más información.
    – Alvaro Montoro
    Commented el 21 jun. 2019 a las 14:14
  • En este pen labyrinth la función txt se encarga de escribir texto en canvas. Podrías probar algo así. Si esto no ayuda, por favor añade tu código
    – enxaneta
    Commented el 21 jun. 2019 a las 20:27

1 respuesta 1

1

Ahhhh!, ya me ha pasado eso una vez!, yo intente hacer algo así y me di cuenta que para poder hacer lo que requieres debes hacer lo siguiente en css:

html,body{

 display: block;
 width: 100%;
 height: 100%;

}

canvas{

 display: block;
 position: absolute;

}

Al canvas no le recomiendo que le pongas width: 100% y height: 100%, tampoco te recomiendo que uses la función window.onresize y hagas cambios al ancho y alto del canvas desde js para que se adapte al tamaño de la pantalla, lo que te recomiendo es que cambies el ancho y alto de la pantalla en js con un requestAnimationFrame o un setInterval, ya que si usas window.onresize, al hacerlo te dejara ciertos espacios blancos al lado izquierdo o derecho del canvas:

window.onload = ()=>{

    const canvas = document.getElementById("canvas");

    requestAnimationFrame(()=>{

         const cWidth = window.innerWidth;
         const cHeight = window.innerHeight;
         canvas.width = cWidth;
         canvas.height = cHeight;

    });

}
4
  • Otra cosa, si lo que deseas es solo poner texto (No otros elementos HTML), hay una forma mucho mas sencilla y mejor de realizarlo.
    – Layer
    Commented el 23 jun. 2019 a las 3:50
  • mil gracias!!! voy a probarlo ahora, ;) Commented el 24 jun. 2019 a las 8:39
  • Veo que te ha funcionado, espero que haya sido de ayuda ;3
    – Layer
    Commented el 24 jun. 2019 a las 19:43
  • sí, me ha funcionado!! gracias!! Commented el 25 jun. 2019 a las 8:40

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.