JSFiddle - React, Tailwind, and code Playground

by Darby Rathbone

CSS

body {
    overflow-y:scroll;
}

JavaScript

var cc1 = document.createElement('canvas'),

    c1 = cc1.getContext('2d'),
    cc2 = document.createElement('canvas'),
    c2 = cc2.getContext('2d');
cc1.buffer = document.createElement('canvas');
cc2.buffer = document.createElement('canvas');

cc1.style.border = cc2.style.border = "1px solid black";
document.body.appendChild(cc1);
document.body.appendChild(cc2);
document.body.appendChild(cc1.buffer);
document.body.appendChild(cc2.buffer);
c1.buffer = cc1.buffer.getContext('2d');
c2.buffer = cc2.buffer.getContext('2d');
var values1 = new Object(), values2 = new Object();
values1.x = values2.x = values1.y = values2.y = 0;
var checkCollision = function(e1, e2) {

     values1.x = parseInt(e1.style.left);
    values1.y = parseInt(e1.style.top);
    values2.x = parseInt(e2.style.left);
    values2.y = parseInt(e2.style.top);
    if (Math.sqrt(((values1.x - values2.x) * (values1.x - values2.x)) + (((values1.y - values2.y)) * ((values1.y - values2.y)))) < 2 * (values1.top - values1.bottom)) {
        var ctx1 = cc1.buffer.getContext('2d');
        var ctx2 = cc2.buffer.getContext('2d');
        ctx1.save();
        ctx1.translate(100, 100);
        ctx1.rotate(Math.atan2(values1.y - values2.y, values1.x - values2.x));
        ctx1.translate(-100, -100);
        ctx1.drawImage(e1, 0, 0);
        ctx1.restore();
        cc1.getContext('2d').drawImage(cc1.buffer, 0, 0);
        ctx2.save();
        ctx2.translate(100, 100);
        ctx2.rotate(Math.atan2(values2.y - values1.y, values2.x - values1.x));
        ctx2.translate(-100, -100);
        ctx2.drawImage(e2, 0, 0);

        cc2.getContext('2d').drawImage(cc2.buffer, 0, 0);
        ctx2.restore();
    }
};
var toppos = 0,
    leftpos = 0;
var waitForFinalEvent = (function () {
    var timers = {};
    return function (callback, ms, uniqueId) {
        if (!uniqueId) {
            uniqueId = "Don't call this twice without a uniqueId";
        }
        if (timers[uniqueId]) {
           ...