JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="canvas" width="900" height="500"></canvas>

JavaScript

function draw_triangle(ox,oy,tx,ty,lx,ly) {
    var canvas = document.getElementById('canvas');
    if (canvas.getContext){
        var ctx = canvas.getContext('2d');
        
        var myArray = ['AB7AB4','B457A7','5D4CA1','E063A9'];
        var color = myArray[Math.floor(Math.random() * myArray.length)];
        
        ctx.beginPath();
        ctx.moveTo(ox,oy);
        ctx.lineTo(tx,ty);
        ctx.lineTo(lx,ly);
        ctx.lineTo(ox,oy);
        
        ctx.fillStyle = color;
        ctx.fill();
        
    }
}

draw_triangle('410','48','475','86','420','135');

var x = 300;

// execute a function every 50ms
window.setInterval( function() {
    // erase the canvas
    var context = document.getElementById('canvas').getContext('2d');
    context.clearRect(0, 0, 900, 500);
    // update the coordinates
    x++;
    if (x > 500) x = 300;
    // redraw with new coordinates
    draw_triangle('410','48',x,'86','420','135');
}, 50);