JSFiddle - React, Tailwind, and code Playground

by dactivo

HTML

<canvas id="myCanvas" width="350" height="50"></canvas>

JavaScript

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

      var w = canvas.width;
      var linelength = w / 2-10-30;
var wf=(linelength*2)+10+30;
var beginx=1;
var beginy=12;
var lasty=8;

      context.lineWidth = 4;
      context.beginPath();
  context.moveTo(beginx, beginy);
  context.arcTo(beginx, lasty,beginx+10, lasty, 7);
  context.lineTo(linelength,lasty);
  context.arcTo(linelength+30, lasty, linelength+30, 3, 7);
  context.arcTo(linelength+30, lasty, linelength+40, lasty, 7);
  context.lineTo(wf,lasty);
  context.arcTo(wf+8, lasty,wf+8, beginy, 7);
//  context.arcTo(w+10, 8,w+ 30, 40, 7);

context.stroke();