JSFiddle - React, Tailwind, and code Playground

by M. Junaid Salaat

HTML

<div style="padding: 1vw;">
    <a href="/virtualscribe" class="camLink">
        <div class="camDiv">
            <div class="camBox" id="picBoxLeft">
                <canvas id="canvasLeft" class="camBorder"></canvas>
            </div>
        </div>
    </a>
    <a href="/videos" class="camLink">
        <div class="camDiv">
            <div class="camBox" id="picBoxCenter">
                <canvas id="canvasCenter" class="camBorder"></canvas>
            </div>
        </div>
    </a>
    <div class="camDiv">
        <div class="camBox" id="picBoxRight">
            <canvas id="canvasRight" class="camBorder"></canvas>
        </div>
    </div>
</div>

CSS

<style>
    .camBox {
        max-width: 28vw;
        width: 28vw;
        height: 21vw;
        max-height: 21vw;
        display: inline-block;
    }
    .camDiv {
        padding: 1.5vw;
        display: inline-block;
    }
    .camBorder {
        border: 0.6vw solid #fe890f;
        border-top-left-radius: 3.3vw;
        border-bottom-right-radius: 3.3vw;
    }
    .camLink {
        color: transparent;
    }

JavaScript

var refreshTimer;
    var imgLiveCam;

    function drawPictureBox(img, canvas, text) {
        var context = canvas.getContext("2d");
        context.drawImage(img, 0, 0, canvas.width, canvas.height);
        context.globalAlpha = 0.6;
        context.fillStyle = "rgb(244,121,32)";
        context.fillRect(0, canvas.height * 0.67, canvas.width, canvas.height * 0.33);
        context.globalAlpha = 1;
        var maxWidth = canvas.width;
        var x = canvas.width / 2;
        var y = canvas.height * 0.85;
        context.font = canvas.width / 12 + 'px Oswald';
        context.strokeStyle = 'black';
        context.lineWidth = 2;
        context.textAlign = "center";
        context.strokeText(text, x, y, maxWidth);
        context.fillStyle = 'white';
        context.fillText(text, x, y, maxWidth);
    };
    function drawCamBox(img, logo, canvas) {
        var context = canvas.getContext("2d");
        context.drawImage(img, 0, 0, canvas.width, canvas.height);
        context.globalAlpha = 0.6;
        context.fillStyle = "rgb(244,121,32)";
        context.fillRect(0, canvas.height * 0.67, canvas.width, canvas.height * 0.33);
        var eSize = canvas.height / 10;
        context.globalAlpha = 1;
        context.drawImage(logo, 2, canvas.height * 0.67 - eSize, eSize, eSize);
        var now = new Date();
        var text = now.toLocaleDateString() + " " + now.toLocaleTimeString();
        var maxWidth = canvas.width * 0.33;
        var x = canvas.width - 10 - maxWidth;
        var y = canvas.height * 0.67 - 10;
        context.font = maxWidth / 10 + "px Arial";
        context.strokeStyle = 'black';
        context.lineWidth = 2;
        context.strokeText(text, x, y, maxWidth);
        context.fillStyle = 'white';
        context.fillText(text, x, y, maxWidth);
        text = 'View Our Production Floor';
        context.textAlign = "center";
        maxWidth = canvas.width;
        x = canvas.width / 2;
        y = canvas.height * 0.85;
        context.font...