Element overlapping all the rest

Asked

Viewed 43 times

0

I’m creating a project binary decoder, wanted to "decorate" putting a Matrix style background, but it overlaps all other elements present in 

// geting canvas by Boujjou Achraf
var c = document.getElementById("c");
var ctx = c.getContext("2d");

//making the canvas full screen
c.height = window.innerHeight;
c.width = window.innerWidth;

//chinese characters - taken from the unicode charset
var matrix = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ123456789@#$%^&*()*&^%+-/~{[|`]}";
//converting the string into an array of single characters
matrix = matrix.split("");

var font_size = 10;
var columns = c.width / font_size; //number of columns for the rain
//an array of drops - one per column
var drops = [];
//x below is the x coordinate
//1 = y co-ordinate of the drop(same for every drop initially)
for (var x = 0; x < columns; x++)
   drops[x] = 1;

//drawing the characters
function draw() {
   //Black BG for the canvas
   //translucent BG to show trail
   ctx.fillStyle = "rgba(0, 0, 0, 0.04)";
   ctx.fillRect(0, 0, c.width, c.height);

   ctx.fillStyle = "#f4427d"; //green text
   ctx.font = font_size + "px arial";
   //looping over drops
   for (var i = 0; i < drops.length; i++) {
      //a random chinese character to print
      var text = matrix[Math.floor(Math.random() * matrix.length)];
      //x = i*font_size, y = value of drops[i]*font_size
      ctx.fillText(text, i * font_size, drops[i] * font_size);

      //sending the drop back to the top randomly after it has crossed the screen
      //adding a randomness to the reset to make the drops scattered on the Y axis
      if (drops[i] * font_size > c.height && Math.random() > 0.975)
         drops[i] = 0;

      //incrementing Y coordinate
      drops[i]++;
   }
}

setInterval(draw, 30);
/* By Boujjou Achraf*/

/*basic reset */

* {
   margin: 0;
   padding: 0;
}

body {
   background: black;
}

canvas {
   display: block;
   opacity: 0.4;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
   width: 100%;
   height: 100%;
}
<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="stylesheet" type="text/css" href="estilo.css">
   <title>Document</title>
</head>

<body>
   <canvas id="c">
      <h1 id="h1"><em>Insira o código binário</em></h1>
      <input type="number" name="binario" id="bint"><br>
      <button id="decod"></button>
      <output id="bout"></output>
   </canvas>
</body>

</html>

Source: https://codepen.io/wefiy/pen/WPpEwo

javascript html css

1 answer

2

First, in HTML, put your content off the canvas:

<canvas id="c"></canvas>
<h1 id="h1"><em>Insira o código binário</em></h1>
<input type="number" name="binario" id="bint"><br>
<button id="decod"></button>
<output id="bout"></output>

Then use position: absolute in the canvas CSS so that it does not take up space and push the rest down. So it will be behind the rest:

canvas {
   position: absolute;
   display: block;
   opacity: 0.4;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
   width: 100%;
   height: 100%;
}

  • he kind of goes on top, I can’t put anything in the "<input type="number" name="binary" id="bint"><br>" I can’t click or anything... Edit: I put the rest as position:relative, and stood out to the "Matrix" obg to help help ^^

  • @Maicke is because you should have put the element code canvas (i.e., above it) but how you changed the property position input, will have the same result.

Browser other questions tagged javascript html css

You are not signed in. Login or sign up in order to post.