JSFiddle - React, Tailwind, and code Playground

by userdude

HTML

<canvas id="mycanvas" width="400" height="300"></canvas>

CSS

html,
body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}
#mycanvas {
    margin: 0 auto;
    padding: 0;
}
@font-face {
    font-family: 'Griffy';
    font-style: normal;
    font-weight: 400;
    src: local('Griffy'), local('Griffy-Regular'), url(http://themes.googleusercontent.com/static/fonts/griffy/v1/f4FUXlL5FPqftKJ2T0mqXg.woff) format('woff');
}
@font-face {
  font-family: 'Rye';
  font-style: normal;
  font-weight: 400;
  src: local('Rye Regular'), local('Rye-Regular'), url(http://themes.googleusercontent.com/static/fonts/rye/v1/o1b_1mvE63vyDpMCbEPL_A.woff) format('woff');
}
@font-face {
  font-family: 'Jolly Lodger';
  font-style: normal;
  font-weight: 400;
  src: local('Jolly Lodger'), local('JollyLodger'), url(http://themes.googleusercontent.com/static/fonts/jollylodger/v1/RX8HnkBgaEKQSHQyP9itiXhCUOGz7vYGh680lGh-uXM.woff) format('woff');
}

JavaScript

var canvas = document.getElementById("mycanvas");
var context = canvas.getContext("2d");

context.font = '40px Griffy';
context.fillText("StackOverflow", 20, 50);
context.fill();

context.font = 'normal Rye';
context.fillText("StackOverflow", 20, 100);
context.fill();

context.font = '40pt "Jolly Lodger"';
context.fillText("StackOverflow", 20, 150);
context.fill();