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 avaibleColors = [
                '#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'
                ];

            var squareObj = [];
            var circleObj = [];
            for (x in avaibleColors){
    squareObj[squareCol[x]] = avaibleColors[x];
    circleObj[circleCol[x]] = avaibleColors[x];
}
            for(x in squareObj){
       reColor = x;
       cValue = squareObj[x];
           var canvasClass = $('canvas.'+reColor+'');
                        $.each(canvasClass, 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();
                           ...