JSFiddle - React, Tailwind, and code Playground

by TekVanDo

HTML

<script src="https://raw.github.com/caleb531/jcanvas/master/jcanvas.min.js"></script>
<canvas id="myCanvas" width="578" height="800"></canvas>

JavaScript

function wrapText(context, text, marginLeft, marginTop, maxWidth, lineHeight)
    {
        var words = text.split(" ");
        var countWords = words.length;
        var line = "";
        for (var n = 0; n < countWords; n++) {
            var testLine = line + words[n] + " ";
            var testWidth = context.measureText(testLine).width;
            if (testWidth > maxWidth) {
                context.fillText(line, marginLeft, marginTop);
                line = words[n] + " ";
                marginTop += lineHeight;
            }
            else {
                line = testLine;
            }
        }
        context.fillText(line, marginLeft, marginTop);
} 



var canvas = document.getElementById('myCanvas');
 var context = canvas.getContext('2d');
 var background = new Image(); 
 var team1 = new Image(); 
 var team2 = new Image(); 

    var maxWidth = 400; //размер поле, где выводится текст
    var lineHeight = 25;
    /*если мы знаем высоту текста, то мы можем
     предположить, что высота строки должна быть именно такой*/
    var marginLeft = 20;
    var marginTop = 600;
    var text = "Сначала мы разбиваем текст на слова по пробелам, а потом обходим эти слова в цикле, " +
            "объединяя их по одному в строку. Если при последнем объединении ширина этой строки меньше максимальной, ";




  background.onload = function() {   
     context.drawImage(background, 0, 0);
     context.drawImage(team1, 40, 270);
     context.drawImage(team2, 233, 270);
    context.fillStyle = '#f00';
    context.font = 'italic bold 30px sans-serif';
    context.font = "8pt Calibri";
    context.fillStyle = "#000";
    wrapText(context, text, marginLeft, marginTop, maxWidth, lineHeight);
 };  
background.src = 'http://rfll.b-cms.ru/skins/rfll/images/be_fore_jpg.jpg';
team1.src = 'http://rfll.b-cms.ru/timthumb.php?src=/uploads/football/teams/49.png&h=118&w=118&zc=1';
team2.src = 'http://rfll.b-cms.ru/timthumb.php?src=/uploads/football/teams/82.png&h=118&w=118&zc=1';