JSFiddle - React, Tailwind, and code Playground

by Santosh Thakur

HTML

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

JavaScript

var canvas = document.getElementById('tutorial');
var ctx = canvas.getContext('2d');

ctx.fillStyle = "rgb(255, 255, 0)";
ctx.strokeStyle = "rgb(255, 200, 0)";

ctx.beginPath();
ctx.moveTo(195, 149);
ctx.arc(150, 170, 50, 5.8, 0.5, true);

ctx.lineTo(160, 170);
ctx.lineTo(195, 149);
ctx.fill();
ctx.stroke();

ctx.fillStyle = "rgb(200, 150, 0)";

ctx.beginPath();
ctx.arc(160, 145, 5, 0, Math.PI*2, true);
ctx.arc(140, 145, 5, 0, Math.PI*2, true);
ctx.fill();