入力した文字列から画像を作成する【JavaScript・アイキャッチ画像】

文字列：

ソースコード

$(function(){
    $("#exec").click(function(){
        const ctx = $("#cv")[0].getContext("2d");
        var word = $("#word").val();

        ctx.fillStyle = 'white';
        ctx.fillRect(0, 0, 800, 600);
        
        ctx.font = '80px sans-serif';
        ctx.textBaseline = 'center';
        ctx.textAlign = 'center';
        ctx.fillStyle = 'gray';
        ctx.fillText(word, 400+4, 300+4);
        ctx.fillStyle = 'black';
        ctx.fillText(word, 400, 300);
        
        ctx.lineWidth = 9;
        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'white';
        
        ctx.beginPath();
        ctx.moveTo(88, 80);
        ctx.lineTo(712,  80);
        ctx.arc(712, 88, 8, Math.PI * (3/2), 0, false);
        ctx.lineTo(720, 512);
        ctx.arc(712 , 512, 8, 0, Math.PI * (1/2), false);
        ctx.lineTo(88, 520);
        ctx.arc(88, 512, 8, Math.PI * (1/2), Math.PI, false);
        ctx.lineTo(80, 88);
        ctx.arc(88, 88, 8, Math.PI, Math.PI * (3/2), false);
        ctx.closePath();
        ctx.stroke(); 
    });
});