JSFiddle - React, Tailwind, and code Playground

by ParkerIndustries

HTML

<div id="elem">
  <textarea name="customMsg" id="custom-msg" ($input)="onMsgInput" {$value}="message" can-value="message" placeholder="Enter your message"></textarea>
</div>

CSS

@import url('https://fonts.googleapis.com/css?family=Song+Myung&display=swap');

JavaScript

var parentElem = document.getElementById('elem');

function addTextToImage(elem, imagePath, text) {
		// Get text from input
		//text = document.getElementById('custom-msg');
		// Trying to fit text into my box with 6 characters max for each lines
		// text = text.replace(/([\w\s]{6,}?)\s?\b/g, "$1\n");
  
  	var circle_canvas = document.createElement("canvas");
  	var context = circle_canvas.getContext("2d");
  
    // Draw Image function
    var img = new Image();
    img.src = imagePath;
   
    img.onload = function () {
        circle_canvas.width = img.width;
        circle_canvas.height = img.height;
        context.drawImage(img, 0, 0, 349, 619);
        context.lineWidth = 1;
        context.fillStyle = "#00f3F355";
        //context.lineStyle = "#f3f3F3";
        context.font = "52px 'Song Myung', serif";
        context.fillText(text, 90, 380);

        elem.appendChild(circle_canvas);
    };
}

// Add new customizable image
addTextToImage(parentElem, "https://thumbs.dreamstime.com/z/bo%C3%AEte-carr%C3%A9e-blanche-vue-de-face-108936119.jpg", "Text to be centered");
//parentElem.appendChild(canvasElem);