JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="canvasId"></canvas>

JavaScript

function drawTriangle(color) {
    var context = document.getElementById("canvasId").getContext("2d");
    
    var width = 150; 
    
    var height = 105; 
    context.clearRect(0,0,width,height);
    
    context.beginPath();
    context.moveTo(75, 0);       
    context.lineTo(150, 105); 
    context.lineTo(0, 105);       
    context.closePath();
    
    
    context.fillStyle = color;
    context.fill();
}
    
drawTriangle("#ffc821");

$('#canvasId').hover(function () {
    drawTriangle("#0000FF");
}, function () {
    drawTriangle("#ffc821");
});