How can I make canvas element act as a background?

Question

I want to use the canvas element as the background for my page.

How can I make "We craft brand experiences for companies and nonprofits making a difference." show up on top of the background?

  <!DOCTYPE html> <html > <head> <meta charset="UTF-8"> <title>Confetti Party</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> </head> <body> <canvas id="canvas"></canvas> <script src="js/index.js"></script> <h1>we craft brand experiences for companies and nonprofits making a difference. </h1> </body> </html>

As you can see, my h1 tag is not on top of background.

Answer 1

If I understand your question correctly, then you effectively want to make the canvas your page's background. This is rather trivial can be done by taking advantage of the CSS z-index property:

 /////////////////////////////////////////////// // configurables /////////////////////////////////////////////// // background color // var bg = [159, 240, 167] var bg = [255, 255, 225] // maximum number of particles present at any time var num_particles = 150 // chace of split var chance_birth = 0.37 // chance of termination/death var chance_death = 0.38 var cols = ['#FF5722', '#FF9800', '#FF9800', '#FF9800', '#FF9800', '#B71C1C', '#00BCD4', '#00BCD4', '#009688'] /////////////////////////////////////////////// // the other stuff /////////////////////////////////////////////// //var canvas = document.createElement("canvas") //document.getElementsByTagName("body")[0].appendChild(canvas) var canvas = document.getElementById("canvas") var ctx = canvas.getContext("2d") var particles = [] var step = 0 var step_max = 360 setup() window.addEventListener("resize", setup) function setup() { canvas.width = window.innerWidth canvas.height = window.innerHeight fill(1) } function fill(amt) { ctx.beginPath(); ctx.rect(0, 0, canvas.width, canvas.height) ctx.fillStyle = `rgba(${bg[0]}, ${bg[1]}, ${bg[2]}, ${amt})` ctx.fill() } setInterval(animate, 1000/60) // window.requestAnimationFrame(animate); function animate() { fill(0.01) step = (step + 1) % step_max draw() // window.requestAnimationFrame(function(){animate()}) } function getRandCol () { return cols[Math.floor(Math.random() * cols.length)] } function draw() { var pad = 0.02 var p if (particles.length < num_particles && step % 2 === 0) { var x = (Math.random() * (1 - pad * 2) + pad) * canvas.width var y = canvas.height + Math.random()*10 //(Math.random() * (1 - pad * 2) + pad) * canvas.height p = new Particle(x, y, ctx) particles.push(p) } var i for (i = 0; i < particles.length; i++) { particles[i].update() particles[i].draw() // branch-birth if (step % 4 === 0 && Math.random() < chance_birth && particles.length < num_particles) { var x = particles[i].x var y = particles[i].y p = new Particle(x, y, ctx) p.color = particles[i].color particles.push(p) } } // death for (i = particles.length -1 ; i >= 0; i--) { p = particles[i] if ((step % 4 === 0 && Math.random() < chance_death) || py < -20 || px < -20 || px > canvas.width + 20) { particles.splice(i, 1) } } // draw links var dist_max = 60 for (i = particles.length -1 ; i >= 0; i--) { p = particles[i] } } function Particle (x, y, ctx) { this.x = x this.y = y this.px = x this.py = y this.dx_min = -20 this.dx_max = 20 this.dy_min = -1 this.dy_max = -25 this.s = 0.8 this.ctx = ctx this.color = getRandCol() //"#ee9977" this.update = function () { this.px = this.px * this.s + this.x * (1 - this.s) this.py = this.py * this.s + this.y * (1 - this.s) var dxy = this.dxy() this.x = this.s * this.x + (Math.random() * dxy.dx + this.x) * (1 - this.s) this.y = this.s * this.y + (Math.random() * dxy.dy + this.y) * (1 - this.s) } this.draw = function () { // var v = Math.min(this.vsq(), 500) ctx.lineWidth = 2 //Math.sqrt(v)/3 ctx.beginPath() ctx.moveTo(this.px, this.py) ctx.strokeStyle = this.color ctx.lineTo(this.x, this.y) ctx.lineCap = "round" ctx.stroke() } this.dxy = function () { var dx = (this.dx_max - this.dx_min) * Math.random() + this.dx_min var dy = (this.dy_max - this.dy_min) * Math.random() + this.dy_min return {dx, dy} } this.vsq = function () { var x = this.px - this.x var y = this.py - this.y return x * x + y * y } }

 canvas{ /* Move the canvas to a low z-index (background) */ z-index: -1; } .wrapup{ /* This class creates a div that is positioned on top of everything outside of it */ width:100%; height:100%; z-index:100; display:block; overflow:hidden; margin:0; border:0; padding:0; position:absolute; top:0; bottom:0; right:0; left:0; } body { /* Just some stuff to clean up the look by filling page and removing scrollbars */ width:100%; height: 100%; overflow: hidden; }

  <!DOCTYPE html> <html > <head> <meta charset="UTF-8"> <title>Confetti Party</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> </head> <body> <canvas id="canvas"></canvas> <script src="js/index.js"></script> <div class="wrapup"> <h1>we craft brand experiences for companies and nonprofits making a difference. </h1> </div> </body> </html>

As for how you decide to position the h1 on the page, that is up to you, but anything you place inside of the wrapup div will appear atop the canvas.

Answer 2

Change <h1> to

<h1 style="position:fixed; top:500px; left:300px;">

You can adjust the 500px and 300px values to move it to a different position on the screen. You can also use a combination of % and margin to automatically center the element, for example:

top:50%; margin-top:-6em;

If you want the text to scroll down with the page, use position:absolute instead.

How can I make canvas element act as a background?

Question

2 answers

solution1
0 2017-11-11 21:23:33

solution2
-2 2017-11-11 20:13:09

How can I make canvas element act as a background?

Question

2 answers

solution1 0 2017-11-11 21:23:33

solution2 -2 2017-11-11 20:13:09

solution1
0 2017-11-11 21:23:33

solution2
-2 2017-11-11 20:13:09