JSFiddle - React, Tailwind, and code Playground

HTML

<div class="center">
    <div class="foo_1 colorRed">foo_1</div>
    <div class="foo_2 colorGreen fontitalic">foo_2</div>
    <div class="test colorPink">to nie foo</div>
    <div class="foo_3 colorBlue">foo_3</div>
</div>

JavaScript

$( "div[class^='foo']" ).each(function( index ) {
        var newCanvas = $('<canvas/>',{
            'class':'radHuh',
            id: 'myCanvas'+ index
        }).prop({
            width: 100,
            height: 100
        });
        $(this).append(newCanvas);
        
        var c= $("#myCanvas"+ index);
				var ctx= c.get(0).getContext("2d");
        
        if($(this).hasClass('colorRed')){
        	ctx.fillStyle = "red";
        }else if($(this).hasClass('colorGreen')){
          ctx.fillStyle = "green";
        }
        
        if($(this).hasClass('fontitalic')){
          ctx.font = "italic 20px Georgia";
        }else{
          ctx.font="20px Georgia";
        }
        
				ctx.fillText("Canvas "+index,5,50); 
    });