Confety example

<canvas id="CONFETTI_CANVAS" style="position:fixed;top:0;left:0;display:block;z-index:2147483646;"></canvas>

<script>
function CUSTOM_CONFETTI_CANVAS(e, t, a, i) {
    this.canvas = document.getElementById(e),
    this.W = this.canvas.width = parseInt(t),
    this.H = this.canvas.height = parseInt(a),
    this.ctx = this.canvas.getContext("2d"),
    this.ctx.width = t,
    this.ctx.height = a,
    this.particles = [],
    this.angle = 0,
    this.effectActive = !0,
    this.animationComplete = !0,
    this.animationHandler,
    this.config = i,
    this.init = function() {
        switch (this.config.effect_type) {
        case "Confetti":
            void 0 === this.config.mp && (this.config.mp = Math.floor(this.W / 7)),
            this.Particle = this.confettiParticle;
            break;
        case "Hearts":
            void 0 === this.config.mp && (this.config.mp = Math.floor(this.W / 24)),
            this.Particle = this.HeartParticle;
            break;
        case "Snow":
            void 0 === this.config.mp && (this.config.mp = Math.floor(this.W / 10)),
            this.Particle = this.snowflakesParticle;
            break;
        case "Balloons":
            void 0 === this.config.mp && (this.config.mp = Math.floor(this.W / 24)),
            this.Particle = this.BalloonParticle;
            break;
        case "Stars":
            void 0 === this.config.mp && (this.config.mp = 200),
            this.Particle = this.StarParticle;
            break;
        case "Custom Image":
            void 0 === this.config.mp && (this.config.mp = 50),
            this.Particle = this.ImageParticle
        }
    }
    ;
    var n = {
        colorRGB: ["rgb(30, 144, 255)", "rgb(152,251,152)", "rgb(255, 215, 0)", "rgb(255, 192, 203)", "Thistle", "rgb(173, 216, 230)", "rgb(238, 130, 238)", "rgb(152, 251, 152)", "rgb(70, 130, 180)", "rgb(244, 164, 96)", "rgb(210, 105, 30)", "rgb(220, 20, 60)"],
        secondColor: ["DeepSkyBlue", "OliveDrab", "PaleGoldenRod", "HotPink", "MediumSlateBlue", "LightCyan", "MediumVioletRed", "PaleTurquoise", "Teal", "Salmon", "Coral", "DeepPink"],
        colorIndex: 0,
        getColor: function(e) {
            return "Snow" == e ? "rgb(255, 255, 255)" : "Hearts" == e ? "rgb(255,100,100)" : "Stars" == e ? "rgb(255, 255, 200)" : (this.colorIndex++,
            this.colorIndex >= this.colorRGB.length && (this.colorIndex = 0),
            this.colorRGB[this.colorIndex])
        },
        getSecondColor: function(e) {
            var t = this.colorRGB.indexOf(e);
            return this.secondColor[t]
        }
    };
    function r(e, t) {
        return Math.floor(Math.random() * (t - e + 1) + e)
    }
    this.start = function() {
        this.particles = [],
        this.animationComplete = !1;
        for (var e = 0; e < this.config.mp; e++) {
            this.config.color = n.getColor(this.config.effect_type);
            var t = Object.assign(!0, {}, this.config);
            this.particles.push(new this.Particle(this.W,this.H,this.ctx,t))
        }
        this.StartEffect()
    }
    ,
    this.confettiParticle = function(e, t, a, i) {
        this.x = Math.random() * e,
        this.y = Math.random() * t - t,
        this.r = r(10, 30),
        this.d = Math.random() * i.mp + 10,
        this.tilt = Math.floor(10 * Math.random()) - 10,
        this.tiltAngleIncremental = .07 * Math.random() + .05,
        this.tiltAngle = 0,
        this.config = i,
        this.ctx = a,
        this.draw = function() {
            this.ctx.beginPath(),
            this.ctx.lineWidth = this.r / 2,
            this.ctx.strokeStyle = this.config.color,
            this.ctx.moveTo(this.x + this.tilt + this.r / 4, this.y),
            this.ctx.lineTo(this.x + this.tilt, this.y + this.tilt + this.r / 4),
            this.ctx.stroke()
        }
    }
    ,
    this.snowflakesParticle = function(e, t, a, i) {
        this.x = Math.random() * e,
        this.y = Math.random() * t - t,
        this.r = 4 * Math.random() + 1,
        this.d = Math.random() * i.mp,
        this.config = i,
        this.ctx = a,
        this.draw = function() {
            this.ctx.beginPath(),
            this.ctx.fillStyle = this.config.color,
            this.ctx.moveTo(this.x, this.y),
            this.ctx.arc(this.x, this.y, this.r, 0, 2 * Math.PI, !0),
            this.ctx.fill()
        }
    }
    ,
    this.HeartParticle = function(e, t, a, i) {
        this.x = Math.random() * e,
        this.y = Math.random() * t - t,
        this.ys = Math.random() + 2,
        this.minScale = .4,
        this.opacity = Math.random() * (1 - this.minScale) + this.minScale,
        this.config = i,
        this.ctx = a,
        this.draw = function() {
            this.ctx.save(),
            this.ctx.translate(this.x, this.y),
            this.ctx.rotate(4),
            this.ctx.fillStyle = this.config.color.replace("rgb", "rgba").replace(")", "," + this.opacity + ")"),
            this.ctx.beginPath(),
            this.ctx.moveTo(-8, 0),
            this.ctx.arc(0, 0, 8, 0, Math.PI, !1),
            this.ctx.lineTo(8, 0),
            this.ctx.arc(8, -8, 8, 90 * Math.PI / 180, 270 * Math.PI / 180, !0),
            this.ctx.lineTo(8, -16),
            this.ctx.lineTo(-8, -16),
            this.ctx.lineTo(-8, 0),
            this.ctx.fill(),
            this.ctx.closePath(),
            this.ctx.restore()
        }
    }
    ,
    this.StarParticle = function(e, t, a, i) {
        this.x = Math.random() * e,
        this.y = Math.random() * t,
        this.length = r(5, 9),
        this.opacity = Math.random(),
        this.factor = 1,
        this.increment = .03 * Math.random(),
        this.config = i,
        this.ctx = a,
        this.W = e,
        this.H = t,
        this.draw = function() {
            this.ctx.save(),
            this.ctx.translate(this.x, this.y),
            this.ctx.beginPath();
            for (var e = 5; e--; )
                this.ctx.lineTo(0, this.length),
                this.ctx.translate(0, this.length),
                this.ctx.rotate(2 * Math.PI / 10),
                this.ctx.lineTo(0, -this.length),
                this.ctx.translate(0, -this.length),
                this.ctx.rotate(-6 * Math.PI / 10);
            this.ctx.lineTo(0, this.length),
            this.ctx.closePath(),
            this.ctx.fillStyle = "rgba(255, 255, 200, " + this.opacity + ")",
            this.ctx.shadowBlur = 5,
            this.ctx.shadowColor = "#ffff33",
            this.ctx.fill(),
            this.ctx.restore()
        }
    }
    ,
    this.ImageParticle = function(e, t, a, i) {
        this.x = Math.random() * e,
        this.y = Math.random() * t,
        this.ys = Math.random() + 1;
        var n = .6 * Math.random() + .4;
        this.img_height = n * i.img_h,
        this.img_width = n * i.img_w,
        this.opacity = n,
        this.image = new Image,
        this.image.style.height = i.img_h,
        this.image.src = i.img_url,
        this.ctx = a,
        this.config = i,
        this.draw = function() {
            this.ctx.globalAlpha = this.opacity,
            this.ctx.drawImage(this.image, this.x, this.y, this.img_width, this.img_height)
        }
    }
    ,
    this.BalloonParticle = function(e, t, a, i) {
        var k = {};
        k.KAPPA = 4 * (Math.sqrt(2) - 1) / 3,
        k.WIDTH_FACTOR = .0333,
        k.HEIGHT_FACTOR = .4,
        k.TIE_WIDTH_FACTOR = .12,
        k.TIE_HEIGHT_FACTOR = .1,
        k.TIE_CURVE_FACTOR = .13,
        k.GRADIENT_FACTOR = .3,
        k.GRADIENT_CIRCLE_RADIUS = 3,
        this.centerX = Math.random() * e,
        this.centerY = Math.random() * t,
        this.radius = r(20, 30),
        this.secondColor = n.getSecondColor(i.color),
        this.config = i,
        this.ctx = a,
        this.draw = function() {
            var e = this.centerX
              , t = this.centerY
              , a = this.radius
              , i = k.KAPPA * a
              , n = a * k.WIDTH_FACTOR
              , r = a * k.HEIGHT_FACTOR
              , o = t + a + r;
            this.ctx.beginPath();
            var s = e - a
              , _ = t
              , p = e
              , l = t - a;
            this.ctx.moveTo(s, _),
            this.ctx.bezierCurveTo(s, _ - i - n, p - i, l, p, l);
            var c = e
              , u = t - a
              , d = e + a
              , m = t;
            this.ctx.bezierCurveTo(c + i + n, u, d, m - i, d, m);
            var g = e + a
              , f = t
              , h = e
              , y = o;
            this.ctx.bezierCurveTo(g, f + i, h + i, y, h, y);
            var v = e
              , A = o
              , b = e - a
              , C = t;
            this.ctx.bezierCurveTo(v - i, A, b, C + i, b, C);
            var Z = a / 3
              , z = this.ctx.createRadialGradient(e + Z, t - Z, k.GRADIENT_CIRCLE_RADIUS, e, t, a + r);
            z.addColorStop(0, this.config.color),
            z.addColorStop(.7, this.secondColor),
            this.ctx.fillStyle = z,
            this.ctx.fill();
            var w = a * k.TIE_WIDTH_FACTOR / 2
              , x = a * k.TIE_HEIGHT_FACTOR
              , S = a * k.TIE_CURVE_FACTOR;
            this.ctx.beginPath(),
            this.ctx.moveTo(e - 1, o),
            this.ctx.lineTo(e - w, o + x),
            this.ctx.quadraticCurveTo(e, o + S, e + w, o + x),
            this.ctx.lineTo(e + 1, o),
            this.ctx.fill()
        }
    }
    ,
    this.Draw = function() {
        this.ctx.clearRect(0, 0, this.W, this.H);
        for (var e = 0; e < this.config.mp; e++)
            this.particles[e].draw();
        switch (this.config.effect_type) {
        case "Confetti":
            this.UpdateConfetti();
            break;
        case "Snow":
            this.UpdateSnow();
            break;
        case "Balloons":
            this.UpdateBalloons();
            break;
        case "Hearts":
            this.UpdateHearts();
            break;
        case "Stars":
            this.UpdateStars();
            break;
        case "Custom Image":
            this.UpdateImage()
        }
    }
    ,
    this.UpdateSnow = function() {
        var e = 0;
        this.angle += .01;
        for (var t = 0; t < this.config.mp; t++) {
            var a = this.particles[t];
            if (this.animationComplete)
                return;
            a.y += Math.cos(this.angle + a.d) + 1 + a.r / 2,
            a.x += 2 * Math.sin(this.angle),
            (a.x > this.W + 5 || a.x < -5 || a.y > this.H) && this.effectActive && (this.particles[t].d = (this.particles[t].r = (this.particles[t].y = 0 < t % 3 ? (this.particles[t].x = Math.random() * this.W,
            -10) : (0 < Math.sin(this.angle) ? this.particles[t].x = -5 : this.particles[t].x = this.W + 5,
            Math.random() * this.H),
            a.r),
            a.d)),
            this.effectActive || (this.particles[t].y += 5),
            this.particles[t].y <= this.H && e++
        }
        0 === e && this.StopEffect()
    }
    ,
    this.UpdateBalloons = function() {
        for (var e, t = 0, a = 0; a < this.config.mp; a++) {
            if (e = this.particles[a],
            this.animationComplete)
                return;
            e.centerX += r(-1, 1),
            this.effectActive ? e.centerY -= r(2, 3) : e.centerY -= r(7, 8),
            e.centerY < -40 && this.effectActive && (e.centerY = this.H + 30),
            0 <= e.centerY && t++
        }
        0 === t && this.StopEffect()
    }
    ,
    this.UpdateImage = function() {
        for (var e, t = 0, a = 0; a < this.config.mp; a++) {
            if (e = this.particles[a],
            this.animationComplete)
                return;
            "Top - Down" == this.config.effect_dir ? (e.y += e.ys,
            e.y > this.H && this.effectActive && (e.x = Math.random() * this.W,
            e.y = -1 * e.img_height),
            this.effectActive || (e.y += 7),
            e.y <= this.H && t++) : "Down - Top" == this.config.effect_dir ? (e.y -= e.ys,
            e.y < 0 && this.effectActive && (e.x = Math.random() * this.W,
            e.y = this.H + e.img_height),
            this.effectActive || (e.y -= 7),
            0 <= e.y && t++) : "Right - Left" == this.config.effect_dir ? (e.x -= e.ys,
            e.x < 0 && this.effectActive && (e.y = Math.random() * this.H,
            e.x = this.W + e.img_width),
            this.effectActive || (e.x -= 14),
            0 <= e.x && t++) : "Left - Right" == this.config.effect_dir && (e.x += e.ys,
            e.x > this.W && this.effectActive && (e.y = Math.random() * this.H,
            e.x = -1 * e.img_width),
            this.effectActive || (e.x += 14),
            e.x <= this.W && t++)
        }
        0 === t && this.StopEffect()
    }
    ,
    this.UpdateStars = function() {
        for (var e, t = 0; t < this.config.mp; t++) {
            if (e = this.particles[t],
            !this.effectActive)
                return void this.StopEffect();
            1 < e.opacity ? e.factor = -1 : e.opacity <= .1 && (e.factor = 1,
            e.x = Math.random() * this.W,
            e.y = Math.random() * this.H),
            e.opacity += e.increment * e.factor
        }
    }
    ,
    this.UpdateHearts = function() {
        for (var e, t = 0, a = 0; a < this.config.mp; a++) {
            if (e = this.particles[a],
            this.animationComplete)
                return;
            e.y += e.ys,
            e.y > this.H && this.effectActive && (e.x = Math.random() * this.W,
            e.y = -10),
            this.effectActive || (e.y += 7),
            e.y <= this.H && t++
        }
        0 === t && this.StopEffect()
    }
    ,
    this.UpdateConfetti = function() {
        var e, t = 0;
        this.angle += .01,
        this.tiltAngle += .1;
        for (var a = 0; a < this.config.mp; a++) {
            if (e = this.particles[a],
            this.animationComplete)
                return;
            !this.effectActive && e.y < -15 ? e.y = this.H + 100 : (this.stepParticle(e, a),
            this.effectActive || (e.y += 10),
            e.y <= this.H && t++,
            this.CheckForReposition(e, a))
        }
        0 === t && this.StopEffect()
    }
    ,
    this.CheckForReposition = function(e, t) {
        (e.x > this.W + 20 || e.x < -20 || e.y > this.H) && this.effectActive && (0 < t % 5 || t % 2 == 0 ? this.repositionParticle(e, Math.random() * this.W, -10, Math.floor(10 * Math.random()) - 10) : 0 < Math.sin(this.angle) ? this.repositionParticle(e, -5, Math.random() * this.H, Math.floor(10 * Math.random()) - 10) : this.repositionParticle(e, this.W + 5, Math.random() * this.H, Math.floor(10 * Math.random()) - 10))
    }
    ,
    this.stepParticle = function(e, t) {
        e.tiltAngle += e.tiltAngleIncremental,
        e.y += (Math.cos(this.angle + e.d) + 3 + e.r / 2) / 2,
        e.x += Math.sin(this.angle),
        e.tilt = 15 * Math.sin(e.tiltAngle - t / 3)
    }
    ,
    this.repositionParticle = function(e, t, a, i) {
        e.x = t,
        e.y = a,
        e.tilt = i
    }
    ,
    this.StartEffect = function() {
        if (this.animationComplete)
            return null;
        this.Draw();
        var t, e = this;
        try {
            switch (this.config.speed) {
            case "1":
                t = 90;
                break;
            case "2":
                t = 70;
                break;
            case "3":
                t = 50;
                break;
            case "4":
                t = 30;
                break;
            case "5":
                t = 10;
                break;
            default:
                t = 33
            }
        } catch (e) {
            t = 33
        }
        setTimeout(function() {
            e.StartEffect()
        }, t)
    }
    ,
    this.ClearTimers = function() {
        clearTimeout(this.animationHandler)
    }
    ,
    this.stop = function(e) {
        "true" == this.config.effect_close_remove && this.StopEffect(),
        e && (this.animationComplete = !0),
        this.effectActive = !1,
        this.ClearTimers()
    }
    ,
    this.StopEffect = function() {
        this.animationComplete = !0,
        void 0 !== this.ctx && (this.ctx.clearRect(0, 0, this.W, this.H),
        $(this.canvas).remove())
    }
    ,
    window.requestAnimFrame = function() {
        return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(e) {
            return window.setTimeout(e, 1e3 / 60)
        }
    }
}

var f = window.innerWidth;
var h = window.innerHeight;

var y = {
    effect_type: 'Confetti',
    mp: 50,
    speed: '1'
};

var v = new CUSTOM_CONFETTI_CANVAS("CONFETTI_CANVAS",f,h,y);
v.init();
v.start();
</script>