JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="canvas1" width="500" height="300"></canvas>

JavaScript

var can = document.getElementById('canvas1');
var ctx = can.getContext('2d');

ctx.fillStyle = 'gray';
ctx.fillRect(0,0,500,300);

function drawStroked(text, x, y, join, font) {
    ctx.font = "40px " + font;
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'white';
    ctx.lineWidth = 10;
    ctx.lineJoin = join;
	  ctx.miterLimit = 2;
    ctx.strokeText(text, x, y);
    ctx.fillText(text, x, y);
}


drawStroked("miter: Arial", 20, 50, "miter", "Arial");
drawStroked("bevel: Arial", 20, 100, "bevel", "Arial");
drawStroked("round: Arial", 20, 150, "round", "Arial");

drawStroked("miter: Calibri", 250, 50, "miter", "Calibri");
drawStroked("bevel: Calibri", 250, 100, "bevel", "Calibri");
drawStroked("round: Calibri", 250, 150, "round", "Calibri");