JSFiddle - React, Tailwind, and code Playground

by pedro_g_s

HTML

<canvas id="canvas" width="300" height="300" style="background: blue"/>

JavaScript

var canvas = document.getElementById("canvas");  
var ctx = canvas.getContext("2d");  

function randomColor(){
    var r = 255;
    var g = 255;
    var b = 255;
    return "rgb("+ r + "," + g + "," + b +")";
}

const boxWidth = 40;
function texter(str, x, y){
		const originalX = x;
    for(var i = 0; i <= str.length; ++i){
        var ch = str.charAt(i);
        ctx.fillStyle = randomColor();
        const charMeasure = ctx.measureText(ch);
				const xEndPoint = x + charMeasure.width;
        if (xEndPoint >= boxWidth) {
        	x = originalX;
          y += charMeasure.height;
        } else {
        	x = xEndPoint
        }
        ctx.fillText(str.charAt(i), x, y, boxWidth);
    }
}

texter("What's up?What's up?What's up?", 10, 30);