JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="canvas" style=" border:1px solid black;"></canvas>

JavaScript

//since a number of operations are duplicated I wrapped them in functions

function makeShape(ctx,w,h,stroke,fill){
    //define the shape
    ctx.beginPath();
    ctx.moveTo(w,h);
    ctx.lineTo(w-70,h-40);
    ctx.lineTo(w-70,h-100);
    ctx.lineTo(w+70,h-100);
    ctx.lineTo(w+70,h-40);
    ctx.closePath(); 
    //color and draw the shape
    ctx.strokeStyle=stroke;
    ctx.stroke();
    ctx.fillStyle=fill;
    ctx.fill();
    ctx.fillStyle=stroke;
    ctx.fillText("5",w,h-37); 
    
}

function flipCanvas(ctx,w,h){
    ctx.translate(w,h);
    ctx.rotate((Math.PI/180)*180);
    ctx.translate(-w,-h);
}

function draw(){
    var canvas=document.getElementById("canvas");
    canvas.width=300;
    canvas.height=400;
    var w=canvas.width/2;
    var h=canvas.height/2;
    var ctx=canvas.getContext('2d');  
    
    ctx.lineWidth=10;
    ctx.textAlign="center";
    ctx.textBaseLine="middle"
    ctx.font="bold 60px 'Times New Roman', Times, serif";
     
    //background gradient
    var grdBack=ctx.createLinearGradient(w,h+100,w,h+10); 
    grdBack.addColorStop(.75,"black");     
    grdBack.addColorStop(0,"white");    
    ctx.fillStyle=grdBack;
    ctx.fillRect(0,h,w*2,h);
    
    
    //make the reflection next
    flipCanvas(ctx,w,h);
    //remember the canvas is flipped, so the origin is the opposite corner
    var grdBlack=ctx.createLinearGradient(w,h-20,w,h-100); 
    grdBlack.addColorStop(1,"white");     
    grdBlack.addColorStop(0.25,"black");  
    
    var grdRed=ctx.createLinearGradient(w,h-20,w,h-100); 
    grdRed.addColorStop(1,"white");     
    grdRed.addColorStop(0.25,"FF3300");  
    
    
    makeShape(ctx,w,h-10,grdBlack,grdRed); 
    
    //flip back over and render the "actual" shape    
    flipCanvas(ctx,w,h);
    makeShape(ctx,w,h,"black","#FF3300");
}
window.onload=draw;