JSFiddle - React, Tailwind, and code Playground

by Marcus Carey

HTML

<img id="myImage" />

JavaScript

var canvas = document.createElement('canvas');
canvas.height = 33;
canvas.width = 33;
var ctx = canvas.getContext('2d');

// the triangle
ctx.beginPath();
ctx.moveTo(17, 2);
ctx.lineTo(2, 32);
ctx.lineTo(32, 32);
ctx.closePath();
 
// the outline
ctx.lineWidth = 2;
ctx.strokeStyle = '#666666';
ctx.stroke();
 
// the fill color
ctx.fillStyle = "#FFCC00";
ctx.fill();

document.querySelector('#myImage').src = canvas.toDataURL('image/png');