JSFiddle - React, Tailwind, and code Playground

by bgrins

HTML

<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
     
<h1></h1>
<canvas id=c width=500 height=50></canvas>
<canvas id=cOversampled width=1000 height=100></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;
}

#cOversampled {
    width: 500px; height: 50px;
}

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 ctxOversampled = document.getElementById('cOversampled').getContext('2d');
ctxOversampled.font = '36px Lobster, cursive';
ctxOversampled.fillStyle = 'black';
ctxOversampled.textBaseline = 'top';
ctxOversampled.scale(2,2)
ctxOversampled.fillText ('Lobster rendered in a big 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);