JSFiddle - React, Tailwind, and code Playground

by philippkuehn

HTML

<canvas id="triangulation-world" width="466" height="466"></canvas>

JavaScript

canvas = document.getElementById('triangulation-world');
canvas.width = 466;
canvas.height = 466;
ctx = canvas.getContext('2d');
canvas2 = document.createElement('canvas');
canvas2.width = 466;
canvas2.height = 466;
ctx2 = canvas2.getContext("2d");

function draw(index) {
    var j, p0, p1, p2, cx, cy, t;
    t = _triangles[index];
    p0 = t.nodes[0];
    p1 = t.nodes[1];
    p2 = t.nodes[2];
    ctx.beginPath();
    ctx.moveTo(p0.x, p0.y);
    ctx.lineTo(p1.x, p1.y);
    ctx.lineTo(p2.x, p2.y);
    ctx.lineTo(p0.x, p0.y);
    cx = (p0.x + p1.x + p2.x) * 0.33333;
    cy = (p0.y + p1.y + p2.y) * 0.33333;
    j = ((cx | 0) + (cy | 0) * 466) << 2;
    ctx.fillStyle = 'rgba(' + _colorData[j] + ', ' + _colorData[j + 1] + ', ' + _colorData[j + 2] + ', 1)';
    ctx.fill();
}