JavaScript

    const canvas = document.getElementById("canvas_one")
    let ctx = canvas.getContext("2d")

//--filled triangle
    ctx.beginPath();
    ctx.moveTo(75, 25);
    ctx.lineTo(125, 75);
    ctx.lineTo(25, 75);
    ctx.fillStyle = "red";
    ctx.fill();
    ctx.closePath();

//--blue line of triangle
    ctx.beginPath();
    ctx.moveTo(175, 75)
    ctx.lineTo(275, 75)
    ctx.strokeStyle = "Blue"
    ctx.lineWidth = "3"
    ctx.stroke();
    ctx.closePath;

//--green line of triangle
    ctx.beginPath();
    ctx.moveTo(275, 75)
    ctx.strokeStyle = "Green"
    ctx.lineTo(225, 125);
    ctx.stroke();
    ctx.closePath();

//--red line of triangle
    ctx.beginPath();
    ctx.moveTo(225, 125);
    ctx.lineTo(175, 75);
    ctx.strokeStyle = "red";
    ctx.stroke();
    ctx.closePath() 

HTML

    <canvas id="canvas_one"></canvas> 

CSS

    canvas {
        background-color: lightgoldenrodyellow;
    }