JSFiddle - React, Tailwind, and code Playground

by frogggeee McFrogggeee

HTML

<body>


<canvas id = "canvas" width = "480" height = "360" style = "border: 1px solid"></canvas>
</body>

JavaScript

let ctx = document.getElementById("canvas").getContext("2d");
let mX = 0;
let mY = 0;
document.addEventListener("mousemove", function(e) {
 let rect = canvas.getBoundingClientRect();
 mX = e.clientX - rect.left;
 mY = e.clientY - rect.top;
}); 
function text(text, x, y, px, color) {
    ctx.beginPath();
    ctx.font= px + "px Roboto Mono";
    ctx.fillStyle = color;
    ctx.fillText(text, x, y);
    ctx.closePath();
}
function block(x, y, w, h, c) {
 ctx.beginPath();
 ctx.rect(x, y, w, h);
 ctx.fillStyle = c;
 ctx.fill();
 ctx.closePath();
}
function circle(x, y, d, c) {
 ctx.beginPath();
 ctx.arc(x, y, d, 0, 2 * Math.PI);
 ctx.fillStyle = c;
 ctx.fill();
 ctx.closePath();
}
function render() {
 ctx.clearRect(0, 0, 500, 500)
 healthBar(mX, mY, 100, 27, 20);
}
function healthBar(x, y, w, h, val) {
 block(x - (w / 2), y - h - 3, w, h, "grey");
 block(x - (w / 2), y - h - 3, w, h, "lime");
}
setInterval(render, 10);