JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id = "ctx" width="500" height="500" style="border:1px solid #000000;"></canvas>

JavaScript

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

textObject = function(textValue, fontValue, fillStyleValue, xValue, yValue)
{
	this.text = textValue;
    this.font = fontValue;
    this.fillStyle = fillStyleValue;
    this.xPos = xValue;
    this.yPos = yValue;
}

textObject.prototype.Draw = function()
{
    ctx.save();
    
    ctx.font = this.font;
    ctx.fillStyle = this.fillStyle;
    ctx.fillText(this.text, this.xPos, this.yPos);
    
    ctx.restore();
}

var textObject1 = new textObject("Hello there", "30px Arial", "#000", 50, 50);
var textObject2 = new textObject("So you want some?", "25px Arial", "#333", 150, 150);
var textObject3 = new textObject("... Text", "20px Arial", "#555", 300, 300);
textObject1.Draw();
textObject2.Draw();
textObject3.Draw();