JSFiddle - React, Tailwind, and code Playground

by easter bunny

HTML

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

JavaScript

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.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();
ctx.lineWidth=10;
ctx.strokeStyle="black";
ctx.stroke();
ctx.fillStyle="#FF3300";
ctx.fill();


ctx.textAlign="center";
ctx.textBaseLine="middle"
ctx.font="bold 60px 'Times New Roman', Times, serif";
ctx.fillStyle="black";
ctx.fillText("5",w,h-37);



ctx.beginPath();
ctx.moveTo(w,h+10);
ctx.lineTo(w-70,h+50);
ctx.lineTo(w-70,h+110);
ctx.lineTo(w+70,h+110);
ctx.lineTo(w+70,h+50);
ctx.closePath();
ctx.lineWidth=10;

var grd=ctx.createLinearGradient(w,h+10,w,h+110);
grd.addColorStop(0,"black");
grd.addColorStop(.6,"black");
grd.addColorStop(.6,"transparent");
grd.addColorStop(1,"transparent");

ctx.strokeStyle=grd;
ctx.stroke();
var grd=ctx.createLinearGradient(w,h+10,w,h+110);
grd.addColorStop(0,"#FF3300");
grd.addColorStop(.6,"#FF3300");
grd.addColorStop(.6,"transparent");
grd.addColorStop(1,"transparent");
ctx.fillStyle=grd;
ctx.fill();

ctx.translate(w,h+100/2);
ctx.rotate((Math.PI/180)*180);
ctx.translate(-w,-(h+100/2));

ctx.textAlign="center";
ctx.textBaseLine="middle"
ctx.font="bold 60px 'Times New Roman', Times, serif";
ctx.fillStyle="black";
ctx.fillText("5",w,h+56);
}
window.onload=draw;