How do you put an animated canvas behind your elements?

Question

 var COLORS, Confetti, NUM_CONFETTI, PI_2, canvas, confetti, context, drawCircle, i, range, resizeWindow, xpos; NUM_CONFETTI = 350; COLORS = [[85, 71, 106], [174, 61, 99], [219, 56, 83], [244, 92, 68], [248, 182, 70]]; PI_2 = 2 * Math.PI; canvas = document.getElementById("world"); context = canvas.getContext("2d"); window.w = 0; window.h = 0; resizeWindow = function() { window.w = canvas.width = window.innerWidth; return window.h = canvas.height = window.innerHeight; }; window.addEventListener('resize', resizeWindow, false); window.onload = function() { return setTimeout(resizeWindow, 0); }; range = function(a, b) { return (b - a) * Math.random() + a; }; drawCircle = function(x, y, r, style) { context.beginPath(); context.arc(x, y, r, 0, PI_2, false); context.fillStyle = style; return context.fill(); }; xpos = 0.5; document.onmousemove = function(e) { return xpos = e.pageX / w; }; window.requestAnimationFrame = (function() { return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(callback) { return window.setTimeout(callback, 1000 / 60); }; })(); Confetti = (function() { function Confetti() { this.style = COLORS[~~range(0, 5)]; this.rgb = "rgba(" + this.style[0] + "," + this.style[1] + "," + this.style[2]; this.r = ~~range(2, 6); this.r2 = 2 * this.r; this.replace(); } Confetti.prototype.replace = function() { this.opacity = 0; this.dop = 0.03 * range(1, 4); this.x = range(-this.r2, w - this.r2); this.y = range(-20, h - this.r2); this.xmax = w - this.r; this.ymax = h - this.r; this.vx = range(0, 2) + 8 * xpos - 5; return this.vy = 0.7 * this.r + range(-1, 1); }; Confetti.prototype.draw = function() { var _ref; this.x += this.vx; this.y += this.vy; this.opacity += this.dop; if (this.opacity > 1) { this.opacity = 1; this.dop *= -1; } if (this.opacity < 0 || this.y > this.ymax) { this.replace(); } if (!((0 < (_ref = this.x) && _ref < this.xmax))) { this.x = (this.x + this.xmax) % this.xmax; } return drawCircle(~~this.x, ~~this.y, this.r, "" + this.rgb + "," + this.opacity + ")"); }; return Confetti; })(); confetti = (function() { var _results; _results = []; for (i = 1; 1 <= NUM_CONFETTI ? i <= NUM_CONFETTI : i >= NUM_CONFETTI; 1 <= NUM_CONFETTI ? i++ : i--) { _results.push(new Confetti); } return _results; })(); window.step = function() { var c, _i, _len, _results; requestAnimationFrame(step); context.clearRect(0, 0, w, h); _results = []; for (_i = 0, _len = confetti.length; _i < _len; _i++) { c = confetti[_i]; _results.push(c.draw()); } return _results; }; step();

 header { color: gainsboro; text-align: center; font-size: 100px; } html, body { margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden; background: #111; } canvas { z-index:-1; }

 <!DOCTYPE html> <html > <head> <meta charset="UTF-8"> <title>Falling Confetti</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <canvas id="world"></canvas> <script src="js/index.js"></script> <header>Video Game Evolution</header> <iframe src='//cdn.knightlab.com/libs/timeline3/latest/embed/index.html?source=1z5bofC1Vo2wfXVUtAJHp-_o_tvymManjPeX8c4pNAp0&font=Default&lang=en&initial_zoom=2&height=650' width='100%' height='650' frameborder='0'></iframe> </body> </html>

It starts to display the header but the canvas gets in the way. I also have an embedded timeline that I want to be displayed over the canvas. Is it the js in the way? -----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

Answer 1

Make your canvas absolute positioned, give it an appropriate size, and you should get what you want

canvas {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
}

Note: get rid of z-index on the canvas css ... this puts it behind the body, and the body has a background, so hides the canvas

How do you put an animated canvas behind your elements?

Question

1 answers

solution1
0 2016-02-20 02:23:50

How do you put an animated canvas behind your elements?

Question

1 answers

solution1 0 2016-02-20 02:23:50

solution1
0 2016-02-20 02:23:50