JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

#triangle {
        width: 0;
        height: 0;
        border-left: 75px solid transparent;
        border-right: 75px solid transparent;
        border-bottom: 105px solid #FFC821;
}
#triangle:hover {
    border-bottom-color: #0000FF;
}

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");
});