JSFiddle - React, Tailwind, and code Playground

by bgrins

HTML

<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
     
     <h1>Lobster rendered in an h1</h1>

<canvas id=c width=500 height=140></canvas>
     
     <h2>Serif rendered in an h2</h2>

CSS

h1 {
    padding: 0;
    margin: 0;
    padding-left: 10px;
    font: 36px Lobster, cursive;
    color: black;
}

h2 {
    padding: 0;
    margin: 0;
    padding-left: 10px;
    font: 36px Some-Unloaded-Font, serif;
    color: black;
}

JavaScript

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


ctx.mozImageSmoothingEnabled = false;

ctx.font = '36px Lobster, cursive';
ctx.fillStyle = 'black';
ctx.textBaseline = 'top';
ctx.fillText ('Lobster rendered in a canvas', 10, 10);

ctx.font = '36px Some-Unloaded-Font, serif';
ctx.fillStyle = 'black';
ctx.textBaseline = 'top';
ctx.fillText ('Serif rendered in a canvas', 10, 100);