JSFiddle - React, Tailwind, and code Playground

by Ben Watts

HTML

<canvas id="myCanvas-1" width="400" height="400"></canvas>
<canvas id="myCanvas-2" width="400" height="400"></canvas>
<canvas id="myCanvas-3" width="400" height="400"></canvas>
<input id="performance1" value="performance1"></input>
<input id="performance2" value="performance2"></input>
<input id="performance3" value="performance3"></input>
<input id="skillSet1" value="skillSet1"></input>
<input id="skillSet2" value="skillSet2"></input>
<input id="skillSet3" value="skillSet3"></input>
<input id="verificationId1" value="verificationId1"></input>
<input id="verificationId2" value="verificationId2"></input>
<input id="verificationId3" value="verificationId3"></input>

JavaScript

image = new Image();
image.src = "https://upload.wikimedia.org/wikipedia/commons/1/1e/Large_Siamese_cat_tosses_a_mouse.jpg";

image.onload = function () {
    for (i = 1; i < 4; i++) {
        var ctx = document.getElementById('myCanvas-' + i).getContext('2d');

        var candidatePerformance = $('#performance' + i).val();
        var skillSet = $('#skillSet' + i).val();
        var verificationId = $('#verificationId' + i).val();

            ctx.drawImage(image, 0, 0);
            ctx.font = '15pt Arial ';
            ctx.fillStyle = "#000";
            ctx.textAlign = 'left';
            ctx.fillText(skillSet, 10, 125);
            ctx.font = '15pt Arial';
            ctx.fillStyle = "#000";
            ctx.textAlign = 'left';
            ctx.fillText(performance, 160, 155);
            ctx.font = '15pt Arial';
            ctx.fillStyle = "#000";
            ctx.textAlign = 'left';
            ctx.fillText(verificationId, 49, 185);

    }
}