JSFiddle - React, Tailwind, and code Playground

by lun471k

HTML

<canvas id="my-canvas"></canvas>

CSS

#my-canvas {
    border: 1px solid #ffffff;
    height: 100px;
    width: 100px;
}

JavaScript

var bar = document.getElementById("my-canvas");
var barContext = bar.getContext("2d");

var canvasWidth = bar.scrollWidth;
var canvasHorizontalCenter = canvasWidth / 2;
var canvasHeight = bar.scrollHeight;
var barWidth = 50;
var barHorizontalCenter = barWidth / 2;

barContext.fillStyle = "#781108";
barContext.fillRect(canvasHorizontalCenter - barHorizontalCenter, 0, barWidth, 100);