JSFiddle - React, Tailwind, and code Playground

HTML

<div class="centering">
        <canvas id="timeline" />
    </div>

CSS

body {
  background-color: #212b69;
}

.centering {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

JavaScript

var timeline = document.getElementById('timeline');
        var ctx = timeline.getContext('2d');
        var centrline = timeline.height/2;

        // ctx.translate(0.5, 0.5); // I have tried the half-pixel trick

        // line settings
        ctx.lineCap = "round";
        ctx.lineWidth = 30;
        ctx.strokeStyle = "white";

        // draw test stroke
        ctx.beginPath();
        ctx.moveTo(20, centrline);
        ctx.lineTo(60, centrline+10); // offset to show aliasing of edges
        ctx.stroke();