appendChild анимированный холст на 2 элемента

Question

Я «унаследовал» некоторый код JS от предыдущего разработчика.У меня есть базовое понимание JS, поэтому я надеюсь, что это простое исправление.

JS в основном добавляет элемент canvas, внутри div, называемого "фон цитат".В этом элементе canvas есть небольшая анимация.

Код отлично работает для одного элемента canvas, добавленного на страницу.Но мне нужно добавить 2 анимированных холста в два отдельных элемента на одной странице.Когда я пытаюсь сделать это, хотя я могу заставить его правильно добавить оба холста, только второй холст (внизу страницы) показывает анимированную графику, верхний - белый ...

Как мне изменить код, чтобы он отображал одну и ту же движущуюся графику на 2 делителях на одной странице?

Вот мой код:

$(function(){

        // NETWORK  BACKGROUND
        var canvas = document.createElement('canvas'),
            context = canvas.getContext('2d'),
            pool = [],
            maxPoolSize = 14,
            distanceThreshold = 120,
            lastTimestamp = 0,
            nodeConnections = [];
        canvas.className = 'netzwerkanimation';

        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
        maxPoolSize = (canvas.width * canvas.height) / 10000;

        //- var ctx = canvas.getContext('2d'),
        //- ctx.fillStyle = rgb(200,201,172);
        //- ctx.fillRect(0, 0, canvas.width, canvas.height);
        //- ctx.fill();

        function Boid(x, y) {
            this.id = Boid.lastId++;
            this.position = [x, y];
            this.size = 5;
            this.color = 'rgb(0,234,40)';
            this.velocity = [1 - Math.random() * 2, 1 - Math.random() * 2];
        };

        Boid.lastId = 0;

        Boid.prototype = {
            update: function(dt) {
                for (var i = 0; i < maxPoolSize; i++) {
                    var boid = pool[i],
                        distance = this.distanceTo(boid);
                    if (distance < distanceThreshold) {
                        cohesion = []
                    }
                };

                this.position[0] += this.velocity[0] * dt;
                this.position[1] += this.velocity[1] * dt;

                if (this.position[0] > canvas.width) {
                    this.position[0] = 0;
                    // this.velocity[0] *= -1;
                }

                if (this.position[1] > canvas.height) {
                    this.position[1] = 0;
                    // this.velocity[1] *= -1;
                }

                if (this.position[0] < 0) {
                    this.position[0] = canvas.width;
                    // this.velocity[0] *= -1;
                }
                if (this.position[1] < 0) {
                    this.position[1] = canvas.height;
                    // this.velocity[1] *= -1;
                };
            },

            distanceTo: function(boid) {
                var diff = vDiff(this.position, boid.position);
                return Math.abs(vLength(diff));
            },

            isConnectedTo: function(boid) {
                return nodeConnections[boid.id] == this.id ||
                    nodeConnections[this.id] == boid.id;
            },

            connectTo: function(boid) {
                nodeConnections[this.id] = boid.id;
                nodeConnections[boid.id] = this.id;
            },

            draw: function() {
                var pos = [round(this.position[0]), round(this.position[1])],
                    connections = 0;
                context.globalAlpha = 0.5;
                for (var i = 0; i < maxPoolSize; i++) {
                    var boid = pool[i],
                        distance = this.distanceTo(boid),
                        opacity = 1 - (distance / distanceThreshold);
                    if (distance <= distanceThreshold) {
                        connections++;
                        if (!this.isConnectedTo(boid)) {
                            this.connectTo(boid);
                            context.beginPath();
                            context.moveTo(pos[0], pos[1]);
                            context.lineTo(round(boid.position[0]), round(boid.position[1]));
                            context.stroke();
                            context.strokeStyle = "rgba(200,201,172,.5)";
                        }
                    }
                };
                context.globalAlpha = 0.75;
                //- context.fillStyle = rgb(200,201,172);

                context.beginPath();
                context.arc(
                    pos[0],
                    pos[1],
                    this.size * (connections / 5),
                    0, Math.PI * 2
                );
                context.fillStyle = "rgb(200,201,172)";
                context.fill();


            }
        };

        function vDiff(a, b) {
            return [a[0] - b[0], a[1] - b[1]];
        }

        function vLength(a) {
            return Math.sqrt((a[0] * a[0]) + (a[1] * a[1]));
        }

        function round(i) {
            return 0.5 + i | 0
        }

        function draw(timestamp) {
            var dt = (timestamp - (lastTimestamp || timestamp)) / 100;
            lastTimestamp = timestamp;

            context.clearRect(0, 0, canvas.width, canvas.height);

            for (var i = 0; i < maxPoolSize; i++) {
                var boid = pool[i];
                boid.update(dt);
                boid.draw();
            }

            window.requestAnimFrame(draw);
        }

        window.requestAnimFrame = (function() {
            return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function( /* function */ callback, /* DOMElement */
                element) {
                window.setTimeout(callback, 1000 / 60);
            };
        })();

        for (var i = 0; i < maxPoolSize; i++) {
            pool.push(
                new Boid(Math.random() * canvas.width, Math.random() * canvas.height)
            );
        }
        document.getElementsByClassName("quotes-background")[0].appendChild(canvas);
 document.getElementsByClassName("quotes-background2")[0].appendChild(canvas);
        window.requestAnimFrame(draw);

    });

HTML-код просто:

<div id="quotes" class="quotes">
    <div class="quotes-background">
        <!-- where the first should append-->
    </div> 
</div>

<!-- SITE CONTENT -->

<div id="quotes2" class="quotes2">
    <div class="quotes-background2">
        <!-- where the second should append-->
    </div> 
</div>

Я попытался просто скопировать код и изменить всю переменную 'canvas' на 'canvas2', а также попытался добавить второй дочерний элемент присоединения в конце, например:

document.getElementsByClassName("quotes-background")[0].appendChild(canvas);

changeимя класса для quotes-background2, но это не правильно.