JSFiddle - React, Tailwind, and code Playground

by frogggeee McFrogggeee

HTML

<!DOCTYPE html>
<html>
<head>
<body>
<canvas id = "canvas" width = "400" height = "400"></canvas>
<script>
let ctx = document.getElementById("canvas").getContext("2d");
let mX = 0;
let mY = 0;
document.addEventListener("mousemove", function moved(e) {mX = e.clientX; mY = e.clientY;});
function block(x, y, w, h, c) {
	ctx.beginPath();
  ctx.rect(x, y, w, h);
  ctx.fillStyle = c;
  ctx.fill();
  ctx.closePath();
}
function message(text, w, l) {
function mes(t, x, y, px, color) {
    ctx.beginPath();
    ctx.font= px + "px Roboto Mono";
    ctx.fillStyle = color;
    ctx.fillText(t, x, y);
    ctx.closePath();
}
  let words = [];
  let str = "";
  for (let i = 0; i < text.length + 1; i++) {
    if (text.charAt(i) == " " || text.charAt(i) == "") {
      words.push(str + " ");
      str = "";
    } else {
      str = str + text.charAt(i);
    }
  }
  let height = Math.floor(text.length / w) * 24;
  let rows = [];
  let i = 0;
  let count = 0;
  let row = "";
  while (text.length != count) {
  row = "";
  i = 0;
	  while (i == 0) {
		if ((row + words[count + 1]).length > l) {
			i = 1;
			rows.push(row);
		} else {
			row = row + words[count];
		}
		count++;
	  }
  }
  alert(rows)
  block(mX, mY, w * 8, height, "black");
  mes(rows[0], mX, mY + 20, 25, "white");
}

function render() {
	ctx.clearRect(0, 0, 400, 400);
	message("hello my name is bob. I really like to mow the lawn and eat pizza.", 20)
}
	message("hello my name is bob. I really like to mow the lawn and eat pizza.", 20, 14); // 11.4

//setInterval(render, 10);
</script>
</body>
</head>
</html>