JSFiddle - React, Tailwind, and code Playground

by YOUNY zhu

HTML

<canvas id="canvas" width="300" height="300"></canvas>

CSS

canvas{
    background-color:#999;
}

JavaScript

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
drawEqTriangle(ctx, 100, canvas.width/2, canvas.height/2);

function drawEqTriangle(ctx, side, cx, cy){
    
    var h = side * (Math.sqrt(3)/2);
        
    ctx.strokeStyle = "#ff0000";
    
    ctx.save();
    ctx.translate(cx, cy);
  
    ctx.beginPath();
        
        ctx.moveTo(0, -h / 2);
        ctx.lineTo( -side / 2, h / 2);
        ctx.lineTo(side / 2, h / 2);
        ctx.lineTo(0, -h / 2);
        
        ctx.stroke();
        ctx.fill(); 
        
    ctx.closePath();
    ctx.save();

}