JSFiddle - React, Tailwind, and code Playground

by Danny Hearnah

HTML

<canvas id="example" width="150" height="300"></canvas>

CSS

canvas {
    float:right
}

JavaScript

canvas = document.getElementById('example');
var context = canvas.getContext('2d');
// draw line 1
context.beginPath();
context.rect( 0, 10, 150, 10);
context.fillStyle = '#000000';
context.fill();

// draw line 2
context.beginPath();
context.rect( 20, 30, 130, 5);
context.fillStyle = '#000000';
context.fill();

// draw line 3
context.beginPath();
context.rect( 40, 45, 110, 15);
context.fillStyle = '#000000';
context.fill();