JSFiddle - React, Tailwind, and code Playground

by Tenderfeel

HTML

<canvas id="canvas" width="455" height="455"></canvas>

CSS

#canvas {
    background:#fff;
    display:none
}

JavaScript

var canvas, ctx, tcanvas, tctx;
var petals = [];
var message = [];



var messageRowCount= 0;
var lineStatus = [];
var topOffset = 100;
var sideOffset = 50;
var lineHeight = 20;
var textWidth = textHeight = 0;
var fontSize = 13;



//split message
function initText(text){
    var totalX =  totalY = 0;
    var lineTextCount = 0;
    
     
     for (var j = 0; j < text.length; j++) {
         var str = text.charAt(j);
         var size = ctx.measureText(str);
         
         lineTextCount++;
         
         var obj = {
            str :str,
            w : size.width,
            h : size.height,
            x: totalX,
            y: totalY,
            s: 10,
            a:0,
            draw:false,
            br:false,//<br>
            delay:200 //next string drawing delay
        };
         
        if(str.match(/[\s　]+/)){//スペース
            obj.delay = 0;
            obj.br = true;
            messageRowCount++;
            
        }else if(str.match(/[,.､。…]/)){//句読点、三点リーダー
            obj.delay = 3000;
            obj.br = true;
            obj.s = 3;
            messageRowCount++;
        }
         
         if(obj.br){
            lineStatus.push(totalX);
            totalX = lineTextCount = 0;             
            totalY += fontSize;
             textHeight = totalY;
         }else{
             totalX += (fontSize + obj.s);
             textWidth += totalX;
         }
         
          //console.log(obj.str, obj.x, obj.y);
          message.push(obj);
         
         
     }
    
    //console.log('totalY', totalY , lineStatus);
    
    setPosition( (canvas.height - totalY - (topOffset * 2)) / messageRowCount);
    
}


function setPosition( diffLineHeight ){
   var totalRow = 0;
   var totalX = (canvas.width - lineStatus[totalRow]) / 2;
   var totalY = topOffset;
    
   for (var i = 0; i < message.length; i++) {
       var obj = message[i];
       
       obj.x = totalX;
       obj.y = totalY;
       
       if(obj.br){
        ...