JSFiddle - React, Tailwind, and code Playground

by Benjamin DeLong

HTML

<script src="http://cdn.jquerytools.org/1.2.6/full/jquery.tools.min.js"></script>
<h1>A canvas example</h1>
    <ul>
    <li>
        <canvas class=re1g width=110 height=110></canvas>
        <canvas class=re2g width=110 height=110></canvas>
        <canvas class=re3g width=110 height=110></canvas>
        <canvas class=re1p width=110 height=110></canvas>
        <canvas class=re2p width=110 height=110></canvas>
        <canvas class=re3p width=110 height=110></canvas>
        <canvas class=re1b width=110 height=110></canvas>
        <canvas class=re2b width=110 height=110></canvas>
        <canvas class=re3b width=110 height=110></canvas>
        <canvas class=re1y width=110 height=110></canvas>
        <canvas class=re2y width=110 height=110></canvas>
        <canvas class=re3y width=110 height=110></canvas>
    </li>
    <li>
        <canvas class=ci1g width=110 height=110></canvas>
        <canvas class=ci2g width=110 height=110></canvas>
        <canvas class=ci3g width=110 height=110></canvas>
        <canvas class=ci1p width=110 height=110></canvas>
        <canvas class=ci2p width=110 height=110></canvas>
        <canvas class=ci3p width=110 height=110></canvas>
        <canvas class=ci1b width=110 height=110></canvas>
        <canvas class=ci2b width=110 height=110></canvas>
        <canvas class=ci3b width=110 height=110></canvas>
        <canvas class=ci1y width=110 height=110></canvas>
        <canvas class=ci2y width=110 height=110></canvas>
        <canvas class=ci3y width=110 height=110></canvas>
    </li>
</ul>

CSS

body {
            margin: 20px;
            font-family: arial, verdana, helvetica;
            background: #fff;
        }
        h1 {
            font-size: 140%;
            font-weight: normal;
            color: #036;
            border-bottom: 1px solid #ccc;
        }
                    canvas {
            position: relative;
            margin-right: 20px;
            margin-bottom: 20px;
        }
        pre {
            float: left;
            display: block;
            background: rgb(238,238,238);
            border: 1px dashed #666;
            padding: 15px 20px;
            margin: 0 0 10px 0;
        }

JavaScript

var colors = ['#00C8A8','#75B520','#00CD25',
          '#FF63F6','#FF66B3','#DA73FF',
          '#978AFF','#00B5DE','#CF992C',
          '#CF992C','#FF795F','#C38628']; 
var squareCol = ['re1g','re2g','re3g',
             're1p','re2p','re3p',
             're1b','re2b','re3b',
             're1y','re2y','re3y'];
var circleCol = ['ci1g','ci2g','ci3g',
             'ci1p','ci2p','ci3p',
             'ci1b','ci2b','ci3b',
             'ci1y','ci2y','ci3y'];

$(function(){
    $.each(squareCol, function(index, className) {
        cValue = colors[index];
        var canvasClass = '.'+className;
        $(canvasClass).each(function(){
            var ctx = this.getContext('2d');
                            ctx.save();
                            ctx.lineJoin = 'round';
                            ctx.fillStyle = cValue;
                            ctx.strokeStyle = "#000000";
                            ctx.lineWidth = 2;
                            ctx.beginPath();
                            ctx.moveTo(20, 20);
                            ctx.lineTo(90, 20);
                            ctx.quadraticCurveTo(90, 20, 90, 20);
                            ctx.lineTo(90, 90);
                            ctx.quadraticCurveTo(90, 90, 90, 90);
                            ctx.lineTo(20, 90);
                            ctx.quadraticCurveTo(20, 90, 20, 90);
                            ctx.lineTo(20, 20);
                            ctx.quadraticCurveTo(20, 20, 20, 20);
                            ctx.closePath();
                            ctx.fill();
                            ctx.stroke();
                            ctx.restore();
                        });
            });
    
    $.each(circleCol, function(index, className) {
        cValue = colors[index];
        var canvasClass = '.'+className;
        $(canvasClass).each(function(){
                            var ctx = this.getContext('2d');
                            ctx.save();
                           ...