JSFiddle - React, Tailwind, and code Playground

by bgrins

HTML

<a href='#0'>first</a>
<a href='#1'>second</a>
<a href='#2'>third</a>


<div id='bases'></div>

CSS

#bases { position:relative; margin-top: 50px; height: 205px; width: 205px;}

#bases canvas { position:absolute; top:0; left:0;}

JavaScript

function getRunners() {

    var basePathCw = 200;
    var basePathCh  = 200;    
    var minSide = Math.min(basePathCw, basePathCh);
    var diamondsize = minSide*(.7);
    var basesize = diamondsize/4.0;
    var pathLength = diamondsize-basesize;
    
    function getRotatedCanvas() {
        
        var canvas = document.createElement("canvas");
        var context = canvas.getContext("2d");
        
        canvas.width = basePathCw;
        canvas.height = basePathCh;
        
        context.lineWidth = 2;
        context.strokeStyle = "black";
        context.fillStyle = "#D6522C";//"#5E87B0";
        var translateX = (basePathCw-diamondsize)/2.0;
        var translateY = (basePathCh-diamondsize)/2.0;
        var tranCenterX = basePathCw/2.0;
        var tranCenterY = basePathCh/2.0;

        context.translate(tranCenterX ,tranCenterY);
        context.rotate(45.0*Math.PI/180.0);
        context.translate(-tranCenterX ,-tranCenterY);
        
        context.translate(translateX,translateY);
        
        return canvas;
    }
    function getRunner(x, y) {
        
        var canvas = getRotatedCanvas();
        var context = canvas.getContext("2d");
        context.fillRect(x,y,basesize,basesize);

        return canvas;        
    }
    function getPaths() {
        
        var canvas = getRotatedCanvas();
        var context = canvas.getContext("2d");
        context.strokeRect(0,0,diamondsize,diamondsize);
        context.strokeRect(pathLength, 0, basesize, basesize);
        context.strokeRect(0, 0, basesize, basesize);
        context.strokeRect(0, pathLength, basesize, basesize);
        context.strokeRect(pathLength, pathLength, basesize, basesize);
        
        return canvas;
    }
    var canvases = [
        getRunner(pathLength, 0), getRunner(0, 0),
        getRunner(0, pathLength)
    ];
    
    var container = $("#bases");
    container.append(getPaths())
    container.append(canvases);
    return canvases;
}
$(function() {
   ...