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 html tag</h1>
<canvas id=c width=500 height=50></canvas>

<hr />
     
<h2>Serif rendered in an html tag</h2>
<canvas id="c2" width=500 height=50></canvas>
     
<hr />
<h2>Arial rendered in an html tag</h2>
<canvas id="c3" width=500 height=50></canvas>

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.font = '36px Lobster, cursive';
ctx.fillStyle = 'black';
ctx.textBaseline = 'top';
ctx.fillText ('Lobster rendered in a canvas', 10, 10);

var ctx2 = document.getElementById('c2').getContext('2d');
ctx2.font = '36px Some-Unloaded-Font, serif';
ctx2.fillStyle = 'black';
ctx2.textBaseline = 'top';
ctx2.fillText ('Serif rendered in a canvas', 10, 10);


var ctx3 = document.getElementById('c3').getContext('2d');
ctx3.font = '36px Some-Unloaded-Font, serif';
ctx3.fillStyle = 'black';
ctx3.textBaseline = 'top';
ctx3.fillText ('Arial rendered in a canvas', 10, 10);