JSFiddle - React, Tailwind, and code Playground

HTML

<table>
            <tr>
                <td>Border Color</td>
                <td>Element</td>
            </tr>
            <tr>
                <td>Black</td>
                <td>Image</td>
            </tr>
            <tr>
                <td>Blue</td>
                <td>Canvas (with image loaded)</td>
            </tr>
            <tr>
                <td>Green</td>
                <td>Canvas (with image shuffled)</td>
            </tr>
        </table>

CSS

img, canvas {
                margin: 10px;
                background:grey;
            }

            img {
                border: 5px solid black;
            }

            canvas {
                border: 5px solid blue;
            }

            canvas:last-child {
                border: 5px solid green;
            }

            table {
                border: 1px solid gray;
            }

            tr:first-child td {
                border-bottom: 1px solid gray;
            }

            td:first-child {
                padding-right: 10px;
            }

JavaScript

/* Script copyright Max @ www.upgradeyour.com - if it is used or modified, this message must remain intact! */
            $( document ).ready( function() {
                var imgData1 = '/img/logo.png';
                // To prevent problems trying to load an image xdomain, we embed a few simple ones
                var imgData2 =...