JSFiddle - React, Tailwind, and code Playground

by Anthony FAUCOGNEY

HTML

<script>
    
</script>
<body>
    <canvas id="myCanvas" width=400 height=200></canvas>
    <div id="text"></div>
    <canvas id="myCanvas2" width=400 height=200></canvas>
    <div id="text2"></div>
</body>

CSS

/* to remove the top and left whitespace */
 html, body {
    background-color:black;
    width:100%;
    height:100%;
    margin: 0px;
}
/* just to be sure these are full screen*/
 canvas {
    display:block;
}

JavaScript

// Contexte canvas
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var canvas2 = document.getElementById('myCanvas2');
var context2 = canvas2.getContext('2d');

var colors = ["red", "blue", "yellow", "green", "orange"];
// Reinitialisation
canvas.width = canvas.width;
context.strokeStyle = '#C0C0C0';
context.font = 'italic bold 18px sans-serif';

// Definition des types
var Point = makeStruct("x y");
var Line = makeStruct("p1 p2");
var Rec = makeStruct("x y w h");
var Lines = [];

// Definition des deux aires
var recG = new Rec(0, 0, context.canvas.width / 2, context.canvas.height);
var recD = new Rec(context.canvas.width / 2, 0, context.canvas.width / 2, context.canvas.height);

// Affichage des canvas
context.rect(recG.x, recG.y, recG.w, recG.h);
context.rect(recD.x, recD.y, recD.w, recD.h);
context.stroke();

// Init du 2nd canvas
initCanvas2();
generateLines(100);
displayLines();

// Generation des lignes aleatoires
function generateLines(nb) {
    // Afficher les droites
    for (i = 1; i <= nb; i++) {
        var Pgauche = new generateRandomPoint(recG);
        drawX(Pgauche);
        var Pdroite = new generateRandomPoint(recD);
        drawX(Pdroite);
        var L = new makeLine(Pgauche, Pdroite);
        Lines[i - 1] = L;
    }
}

function displayLines() {
    context.fillStyle = "rgb(149,55,53)";
    context.font = 'italic bold 10px sans-serif';
    for (var j = 0; j <= Lines.length; j++) {
        if (!Lines.hasOwnProperty(j)) {
            continue;
        }
        drawLine(Lines[j]);
        context.fillText(j, Lines[j].p1.x - 10, Lines[j].p1.y);
    }
}

// To be lanch after click on top canvas
function showAnalysis() {
    debug("Just do it");
    debug("The Line Array: " + Lines);
    debug("The First Line: " + Lines[0]);
    debug("The Line Points 1: " + Lines[0].p1 + "The Line Points 2: " + Lines[0].p2);
    debug("The point coordonates: " + Lines[0].p1.x + "-"+ Lines[0].p1.y);    
    
}


function...