JSFiddle - React, Tailwind, and code Playground

by antyrat

HTML

<canvas id="triangle" height="14" width="70" style="border:0px solid black;">Triangle</canvas>

<img id="a"/>

CSS

body{
    margin:0;
    padding:0;
    background: #e4e4e4;
}

JavaScript

var canvas = document.getElementById('triangle');
    var context = canvas.getContext('2d');

    context.beginPath();
    context.moveTo(0, 0);
    context.lineTo(35, 12);
    context.lineTo(70, 0);

    context.closePath();
    context.shadowColor = "#888";
    context.shadowBlur = 2;
    context.shadowOffsetX = 0;
    context.shadowOffsetY = 2;
    context.fillStyle = "#fff";
    context.fill();

document.getElementById('a').src = canvas.toDataURL();