title: Is it possible to set a canvas as foreground?
body: <p>I have a simple html page like this:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;&lt;/title&gt;
  &lt;link rel="icon" type="image/vnd.microsoft.icon"  href="images/icon.png" /&gt;
  &lt;link rel="stylesheet" type="text/css" href="style.css" /&gt;
  &lt;/head&gt;
  
  &lt;body bgcolor="ffffff"&gt;&lt;br&gt;
  
  &lt;img src="images/1.png" style="position:relative; left:4%; width:85%"&gt;&lt;/img&gt;
  &lt;meta http-equiv="refresh" content="7; home.html" /&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>that displays an image and after 7 seconds redirects to the home page. I found a cool confetti code online that uses canvas and I would like to add it to this page in the foreground, but always being able to see the image or text I could add to the page in the future, but I can't find a way to do so. the confetti code is this:</p>
  
  <pre><code>(function() {
    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 &gt; 1) {
          this.opacity = 1;
          this.dop *= -1;
        }
        if (this.opacity &lt; 0 || this.y &gt; this.ymax) {
          this.replace();
        }
        if (!((0 &lt; (_ref = this.x) &amp;&amp; _ref &lt; 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 _i, _results;
      _results = [];
      for (i = _i = 1; 1 &lt;= NUM_CONFETTI ? _i &lt;= NUM_CONFETTI : _i &gt;= NUM_CONFETTI; i = 1 &lt;= 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 &lt; _len; _i++) {
        c = confetti[_i];
        _results.push(c.draw());
      }
      return _results;
    };
  
    step();
  
  }).call(this);
  </code></pre>
  
  <p>Any suggestion or idea on how to have the confetti animation in the foreground but keeping the page fully functional in the background?</p>