JSFiddle - React, Tailwind, and code Playground

HTML

<div id='canvas_wrapper' class='center shadow'>
    <canvas id="teleporter_canvas" width="640" height="480">
    Your browser does not support the canvas element. You're really old school!<br />
    <img class='center shadow' src='https://gameart.onderka.com/images/teleporter.jpg'>
    </canvas>
    <canvas id="particle_canvas" width="240" height="280"></canvas>
</div>
<p>Error page for gameart.conderka.com</p>

CSS

body {
  background-color: #000000;
  text-align: center;
  color: #f0f0f0;
  font-family: sans-serif;
}

#canvas_wrapper {
    position: relative;
    width: 640px;
    height: 480px;
    margin: 0 auto;
}

#teleporter_canvas {
    position: absolute;
    top: 0;
    left: 0;
    border: 0;
    width: 640px;
    height: 480px;
}

#particle_canvas {
    position: absolute;
    top: 79px;
    left: 242px;
    border: 0;
    width: 169px;
    height: 316px;
}

JavaScript

/* Layer 1 - Teleporter */
var canvas = document.getElementById("teleporter_canvas"),
ctx = canvas.getContext("2d");
canvas.width   = 640;
canvas.height  = 480;
var background = new Image();
background.src = "https://gameart.onderka.com/images/teleporter.png";
/* Set background onload() */
background.onload = function(){
    ctx.drawImage(background,0,0);
}

/* Layer 2 - Particles */
!function t(i,s,e){function o(r,a){if(!s[r]){if(!i[r]){var p="function"==typeof require&&require;if(!a&&p)return p(r,!0);if(n)return n(r,!0);var h=new Error("Cannot find module '"+r+"'");throw h.code="MODULE_NOT_FOUND",h}var c=s[r]={exports:{}};i[r][0].call(c.exports,function(t){var s=i[r][1][t];return o(s||t)},c,c.exports,t,i,s,e)}return s[r].exports}for(var n="function"==typeof require&&require,r=0;r<e.length;r++)o(e[r]);return o}({"./src/js/index.js":[function(t,i,s){var e=t("./particles"),o=document.querySelector("#particle_canvas"),n=o.getContext("2d"),r=169;function a(){if(r=169,height=316,window.particles)for(var t=0;t<window.particles.length;t++)window.particles[t].position.x>r&&(window.particles[t].stop(),window.particles[t].position.x=r),window.particles[t].position.y>height&&(window.particles[t].stop(),window.particles[t].position.y=height)}height=316,presetDefault={count:500,size:1,minSpeed:50,maxSpeed:100,startOrigin:{x:void 0,y:void 0}},settings=presetDefault,window.generateParticles=function(t,i,s,o){window.particles=window.particles||[];for(var n=0;n<=t;n++){var r=s||169*Math.random(),a=o||316*Math.random();p=new e(r,a,i),window.particles.push(p)}var p},a(),window.addEventListener("resize",a,!1),generateParticles(settings.count,settings.size,settings.startOrigin.x,settings.startOrigin.y),function t(i){requestAnimationFrame(t);r!==o.width&&(o.width=r);height!==o.height&&(o.height=height);if(window.particles)for(var s=0;s<window.particles.length;s++){var e=window.particles[s];if(!e.getPosition(i)){var...