JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="canvas" width="500" height="100"></canvas>

CSS

@import url(https://fonts.googleapis.com/css?family=Oswald);

JavaScript

var textSize = 40;

function init() {

    canvas = document.getElementById("canvas");
    ctx = canvas.getContext("2d");

    ctx.beginPath();
    ctx.lineTo(0, 100);
    ctx.lineTo(0, 0);
    ctx.lineTo(500, 0);
    ctx.lineTo(500, 100);
    ctx.closePath();
    ctx.fillStyle = "#000";
    ctx.fill();
    ctx.closePath();

    // Text
    ctx.save();
    ctx.font = textSize + "px 'Oswald'";
    ctx.fillStyle = "#fff";
    ctx.textBaseline="middle";
    ctx.fillText("Hello, World", 100, (100 - textSize)/2);
    ctx.restore();
}

window.onload = init();